当前位置： 首页 > news >正文

CSS外边距

news 2026/2/1 22:09:23

元素的外边距（margin）是围绕在元素边框以外（不包括边框）的空白区域，这片区域不受 background 属性的影响，始终是透明的。

为元素设置外边距

默认情况下如果不设置外边距属性，HTML 元素就是不会有外边距，但也有例外的情况，因为浏览器会为一些 HTML
元素设置默认的外边距，例如<p>元素。您可以使用下面的属性来为 HTML 元素设置外边距：

  • margin-top：设置元素上方的外边距；
  • margin-bottom：设置元素下方的外边距；
  • margin-right：设置元素右侧的外边距；
  • margin-left：设置元素左侧的外边距；
  • margin：外边距的简写属性，可以同时设置元素四个方向（上下左右）的外边距。

上述外边距属性的可选值如下表所示：

值描述
auto由浏览器计算外边距的尺寸
length使用具体数值配合 px、cm 等单位来定义元素外边距的尺寸，可以为负值，默认值为 0px
%定义基于父元素的宽度百分比的外边距，可以为负值
inherit从父元素继承外边距属性的值

【示例】使用 margin-top、margin-bottom、margin-right、margin-left 几个属性分别设置元素四个方向上的外边距：

<!DOCTYPE html><html><head><style>div.box-one {border: 1px solid red;display:inline-block;   /*将元素转换为行内元素*/}div.box-two {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 80px;margin-top: 10px;margin-right: 1em;margin-left: 1cm;}div.box-three {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid #CCC;background: #CCC;width: 180px;height: 100px;margin-top: 10px;margin-bottom: 1em;margin-right: 10px;margin-left: 1cm;}</style></head><body><div class="box-one"><div class="box-two">margin-top: 10px;<br>margin-right: 1em;<br>margin-left: 1cm;</div><div class="box-three">margin-top: 10px;<br>margin-bottom: 1em;<br>margin-right: 10px;<br>margin-left: 1cm;</div></div></body></html>

运行结果如下图所示：

margin-top、margin-bottom、margin-right、margin-left 属性演示
图：margin-top、margin-bottom、margin-right、margin-left 属性演示

这里需要特别说明一下 margin 属性，与其它几个属性不同，margin 属性可以接受 1~4 个参数（参数之间使用空格分隔）：

  • 如果提供四个参数，那么将按照上、右、下、左的顺序分别作用于元素四个方向的外边距；
  • 如果提供三个参数，那么第一个参数会作用在元素上方的外边距，第二个参数会作用在元素左右两侧的外边距，第三个参数则作用在元素下方的外边距；
  • 如果提供两个参数，那么第一个参数会作用在元素上方和下方的外边距，第二个参数会作用在元素的左右两侧的外边距；
  • 如果只提供一个参数，那么这个值将同时作用于元素上下左右四个方向的外边距。

【示例】使用 margin 属性为元素设置外边距：

<!DOCTYPE html><html><head><style>div.box-one {border: 1px solid red;display:inline-block;   /*将元素转换为行内元素*/}div.box-two {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid black;background: #CFF;width: 200px;height: 100px;margin: 10px 1em;}div.box-three {/*为了能更直观的看出效果，这里为元素设置上边框和背景色*/border: 1px solid #CCC;background: #CCC;width: 150px;height: 50px;margin: 10px 0px 1ex 1em;}</style></head><body><div class="box-one"><div class="box-two">margin: 10px 1em;</div><div class="box-three">margin: 10px 0px 1ex 1em;</div></div></body></html>

运行结果如下图所示：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：margin 属性演示

外边距折叠

外边距折叠指的是相邻的两个或多个外边距会在垂直方向上发生合并，合并为一个外边距。关于外边距折叠有以下几点需要注意：

  • margin 折叠只发生在块级元素上；
  • 浮动元素的外边距不会与任何外边距发生折叠；
  • 设置了 overflow 属性且值不为 visible 的块级元素，将不会与它的子元素发生外边距折叠；
  • 绝对定位元素的外边距不与任何外边距发生折叠；
  • 根元素（例如<body>）的外边距不与其它任何外边距发生折叠。
  1. 在相邻的两个兄弟元素之间：
  • 如果相邻两个元素外边距的值都为正数，那么两个元素的实际间距为两个外边距中较大的那个；
  • 如果相邻两个元素外边距的值都为负数，那么两个元素的实际间距为两个外边距中较小的那个；
  • 如果相邻两个元素外边距的值一个为正数、一个为负数，那么两个元素之间的实际间距为两个外边距相加的和。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：相邻兄弟元素之间的外边距折叠

  1. 在父元素与其子元素之间：（注意：父元素不能定义边框和内边距，且父元素与子元素之间不能有其它元素）
  • 如果父元素与子元素外边距的值都为正数，那么折叠后的外边距为两个外边距中较大的那个；
  • 如果父元素与子元素外边距的值都为负数，那么折叠后的外边距为两个外边距中较小的那个；
  • 如果父元素与子元素外边距的值一个为正数、一个负数，那么折叠后的外边距为两个外边距相加的和。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传
图：父元素与其子元素之间的外边距折叠

原文地址CSS外边距

相关文章：

CSS外边距

元素的外边距&#xff08;margin&#xff09;是围绕在元素边框以外&#xff08;不包括边框&#xff09;的空白区域&#xff0c;这片区域不受 background 属性的影响&#xff0c;始终是透明的。 为元素设置外边距 默认情况下如果不设置外边距属性&#xff0c;HTML 元素就是不会…...

编程日记 2024/9/30 18:16:37

C++ set，multiset与map，multimap的基本使用

1. 序列式容器和关联式容器 string、vector、list、deque、array、forward_list等STL容器统称为序列式容器&#xff0c;因为逻辑结构为线性序列的数据结构&#xff0c;两个位置存储的值之间一般没有紧密的关联关系&#xff0c;比如交换一下&#xff0c;他依旧是序列式容器。顺…...

编程日记 2024/9/30 18:14:35

评估潜力无限：解读自闭症患者的工作能力评估

在星贝育园这片充满爱与希望的土地上&#xff0c;我们不仅见证了无数自闭症儿童在康复训练中的点滴进步&#xff0c;更深刻理解了他们内在潜力的无限可能。自闭症&#xff0c;这一复杂的神经发育障碍&#xff0c;常常让外界对其患者的工作能力产生误解和偏见。然而&#xff0c;…...

编程日记 2024/9/30 18:13:34

js 实现视频封面截图

今天给大家分享一下&#xff0c;如何实现视频封面截取功能&#xff0c;这里主要用到了 HTML5 的 canvas 相关的 api 和 js 相关的一些知识&#xff0c;话不多说&#xff0c;直接上代码&#xff1a; <template><div><div class"margin-tb-sm"><…...

编程日记 2024/9/30 18:12:33

Hadoop FileSystem Shell 常用操作命令

提示&#xff1a;本文章只总结一下常用的哈&#xff0c;详细的命令大家可以移步官方的文档&#xff08;链接贴在下面了哈&#x1f923;&#xff09;— HDFS官方命令手册链接。 目录 1. cat 命令&#xff1a;查看 HDFS 文件内容2. put 命令&#xff1a;将本地文件上传到 HDFS3.…...

编程日记 2024/9/30 18:09:29

uniapp EChars图表

1. uniapp EChars图表 &#xff08;1&#xff09;Apache ECharts 一个基于 JavaScript 的开源可视化图表库   https://echarts.apache.org/examples/zh/index.html &#xff08;1&#xff09;官网图例 &#xff08;2&#xff09;个人实现图例 1.1. 下载echart 1.1.1. 下…...

编程日记 2024/9/30 18:08:28

最新版ingress-nginx-controller安装 使用host主机模式

最新版ingress-nginx-controller安装 使用host主机模式 文章目录 最新版ingress-nginx-controller安装 使用host主机模式单节点安装方式多节点高可用安装方式 官方参考链接&#xff1a; https://github.com/kubernetes/ingress-nginx/ https://kubernetes.github.io/ingress-ng…...

编程日记 2024/9/30 18:07:27

实习问题(配置文件获取参数)

Java中用SpringBoot框架&#xff0c;当我们要获取配置文件yml里的参数时&#xff0c;用Value注解获取 如果配置文件中没有srvSealUploadPath这个参数的话&#xff0c;可以用Value("${srvSealUploadPath:data/idoc/temp}")&#xff0c;这个的意思是&#xff0c;如果配…...

编程日记 2024/9/30 18:06:25

C#测试调用Ghostscript.NET浏览PDF文件

Ghostscript.NET是针对Ghostscript的C#封装库&#xff0c;支持解析PostScript语言、操作PDF文件等。使用Ghostscript.NET的GhostscriptViewer 模块可以以图片形式查看PDF文档。本文学习并测试调用Ghostscript.NET模块打开及浏览PDF文件的基本用法。   Ghostscript.NET目前主要…...

编程日记 2024/9/30 18:03:22

MySQL本地安装步骤

下载MySQL ZIP压缩包 访问MySQL官网&#xff08;https://www.mysql.com/&#xff09;或下载页面&#xff08;https://dev.mysql.com/downloads/mysql/&#xff09;。 在下载页面选择“MySQL Community Server”作为下载目标。 根据你的操作系统&#xff08;Windows&#xff09;…...

编程日记 2024/9/30 18:02:22

redisson使用笔记

文章目录 spring集成redisson maven配置yml配置使用redisTemplate和redisson的区别 其他项目中看到redisson&#xff0c;看样子像是redis相关类库&#xff0c;实际也确实是。 还是老规矩&#xff0c;见到的要了解&#xff0c;需要的必须掌握&#xff0c;了解一下吧。 spring集成…...

编程日记 2024/9/30 18:01:20

设计模式之享元（Flyweight）模式

前言 面向对象很好地解决了 “抽象” 的问题&#xff0c;但是不可避免的要付出一定的代价。对于通常情况来讲&#xff0c;面向对象的成本大都可以忽略不计。但是某些情况&#xff0c;面向对象所带来的成本必须谨慎处理 具体需要自己根据需求去评估 定义 “对象性能” 模式。运用…...

编程日记 2024/9/30 18:00:19

桥接（桥梁）模式

简介 桥接模式&#xff08;Bridge Pattern&#xff09;又叫作桥梁模式、接口&#xff08;Interface&#xff09;模式或柄体&#xff08;Handle and Body&#xff09;模式&#xff0c;指将抽象部分与具体实现部分分离&#xff0c;使它们都可以独立地变化&#xff0c;属于结构型…...

编程日记 2024/9/30 17:58:16

语言模型发展史

四个阶段 第一阶段&#xff1a;基于规则和统计的语言模型 由人工设计特征并使用统计方法对固定长度的文本窗口序列进行建模分析&#xff0c;这种建模方式也被称为N-gram语言模型。 优点&#xff1a; 1&#xff09;采用极大似然估计, 参数易训练 2&#xff09;完全包含了前n-…...

编程日记 2024/9/30 17:56:13

【Linux】模拟实现一个shell

接受每一个人的批评&#xff0c;可是保留你自己的判断。 ——莎士比亚 一段时间的没有更新是由于最近开学期间比较的忙&#xff0c;同时也是由于刚开学的几门课才学习的时候有点迷糊&#xff0c;需要在学校课堂上花的时间更多了&#xff0c;所以才没有更新的&#xff0c;求放过…...

编程日记 2024/9/30 17:55:12

云原生数据库 PolarDB

简介&#xff1a;云原生数据库 PolarDB 是阿里云自研产品&#xff0c;在存储计算分离架构下&#xff0c;利用了软硬件结合的优势&#xff0c;为用户提供秒级弹性、高性能、海量存储、安全可靠的数据库服务。100%兼容MySQL和PostgreSQL生态&#xff0c;支持分布式扩展&#xff0…...

编程日记 2024/9/30 17:54:11

MobaXterm基本使用 -- 服务器状态、批量操作、显示/切换中文字体、修复zsh按键失灵

监控服务器资源 参考网址&#xff1a;https://www.cnblogs.com/144823836yj/p/12126314.html 显示效果 MobaXterm提供有这项功能&#xff0c;在会话窗口底部&#xff0c;显示服务器资源使用情况 如内存、CPU、网速、磁盘使用等&#xff1a; &#xff08;完整窗口&#xff0…...

编程日记 2024/9/30 17:53:10

elastic Search 初步之向量检索的数据写入及检索查询

### Elasticsearch 向量检索实现方法方案 Elasticsearch 从 7.3 版本开始引入了向量检索功能，支持通过向量字段进行相似度搜索。以下是实现向量检索的步骤和方案，包括 Python 和 Java 版本的代码示例。 #### 1. 最低实现向量检索的 ES 版本 - **最低版本**: Elasticsearch …...

编程日记 2024/9/30 17:52:09

Tdesign TreeSelect 树形选择 多选

这里写自定义目录标题 小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据 小程序原生开发 Tdesign TreeSelect 树形选择 多选可以选择不同一级分类下的数据 TreeSelect 树形选择 在原demo基础上修改 const chineseNumber 一二三四五六七八九十.…...

编程日记 2024/9/30 17:49:05

Pygame中Sprite实现逃亡游戏5

在《Pygame中Sprite实现逃亡游戏4》中通过碰撞检测实现了玩家、飞龙与飞火之间的碰撞处理&#xff0c;基本上实现了逃亡功能。最后&#xff0c;实现这个逃亡游戏中文字提示的功能。 1 操作提示 当进入游戏后&#xff0c;会在玩家下方的位置给出操作提示&#xff0c;如图1所示…...

编程日记 2024/9/30 17:46:01

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

编程新知 2026/1/31 6:09:22

学习STC51单片机31（芯片为STC89C52RCRC）OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

编程新知 2026/1/30 4:16:26

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

编程新知 2025/10/22 6:06:44

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/11/26 20:46:42

Kafka主题运维全指南：从基础配置到故障处理

#作者&#xff1a;张桐瑞 文章目录 主题日常管理1. 修改主题分区。2. 修改主题级别参数。3. 变更副本数。4. 修改主题限速。5.主题分区迁移。6. 常见主题错误处理常见错误1&#xff1a;主题删除失败。常见错误2&#xff1a;__consumer_offsets占用太多的磁盘。 主题日常管理 …...

编程新知 2025/6/10 21:14:43

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（八）

uboot启动异常及解决 网络问题及解决 打开STM32CubeMX选中ETH1 - A7NS&#xff08;Linux&#xff09;Mode&#xff1a;RGMII&#xff08;Reduced GMII&#xff09;勾选ETH 125MHz Clock Input修改GPIO引脚如图所示 Net: No ethernet found.生成代码后&#xff0c;修改u-boot下…...

编程新知 2026/1/28 17:36:35

基于开源AI大模型AI智能名片S2B2C商城小程序源码的中等平台型社交电商运营模式研究

摘要&#xff1a;本文聚焦中等平台型社交电商&#xff0c;探讨其与传统微商及大型社交电商平台的差异&#xff0c;尤其关注产品品类管理对代理运营的影响。通过引入开源AI大模型、AI智能名片与S2B2C商城小程序源码技术&#xff0c;构建智能化运营体系。研究结果表明&#xff0c…...

编程新知 2026/1/25 2:53:14

uniapp+＜script setup lang=“ts“＞解决有数据与暂无数据切换显示，有数据加载时暂无数据闪现（先加载空数据）问题

声明showEmpty 为false&#xff0c;在接口返回处判断有数据时设置showEmpty 为false&#xff0c;接口返回数据为空则判断showEmpty 为true &#xff08;这样就解决有数据的时候会闪现暂无数据的问题啦&#xff09; <!--* Date: 2024-02-26 03:38:52* LastEditTime: 2025-06…...

编程新知 2026/1/27 20:28:53

软考 系统架构设计师系列知识点之杂项集萃（81）

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;80&#xff09; 第145题 商业智能是企业对商业数据的搜集、管理和分析的系统过程&#xff0c;主要技术包括&#xff08;&#xff09;。 A. 数据仓库、联机分析和数据挖掘 B. 数据采集、数据清洗…...

编程新知 2026/1/21 2:32:51