CSS 外边距 margin

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

margin

margin 是上下左右 4 个方向单边外边距属性的简化属性，其值可能为 1 - 4 个值。

margin: 10px; /* 4 个方向的外边距相同 */
margin: 10px 20px; /* 分别设置 “上下” “左右”方向的外边距 */
margin: 10px 20px 30px; /* 分别设置 “上” “左右” “下” 方向的外边距 */
margin: 10px 20px 30px 40px; /* 分别设置 “上” “右” “下” “左” 方向的外边距 */

关于 margin 值的个数的说明：

• 1 个值：4 个方向具有相同的外边距
• 2 个值：按参数顺序分别设置 “上下” “左右” 方向的外边距
• 3 个值：按参数顺序分别设置 “上” “左右” “下” 方向的外边距
• 4 个值：按参数顺序分别设置 “上” “右” “下” “左” 方向的外边距

自动边距 auto

将 margin 属性设置为 auto 可以让元素在容器内水平居中。元素占据指定宽度的空间后，剩余的空间将在左右边距之间平均分配。

使用自动边距让元素居中：

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

继承的外边距 inherit

将 margin 属性设置为 inherit 会继承父元素的外边距。

使用 inherit 设置外边距：

div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}

外边距重叠

在 CSS 盒模型概念中，外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

外边距重叠的场景：

• 父子元素的边界重叠
• 兄弟元素的边界重叠
• 空元素的边界重叠

!! 外边距重叠的只是上下边距，左右边距不会重叠。

!! 设定 float 和 position=absolute 的元素不会产生外边距重叠行为。

上下两个元素的外边距重叠

h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}

在上面的示例中，<h1> 元素的底部边距为 50px，而 <h2> 元素的顶部边距设置为 20px。 由于外边距重叠，他们之间的外边距最终为 50px。而不是 70px（50px + 20 px）

所有 CSS 边距属性