【CSS】margin 的使用

margin 的使用

margin 用于设置元素的外边距。

margin 是一个简写属性，包括以下 4 个子属性：

• margin-top：上外边距。
• margin-right：右外边距。
• margin-bottom：下外边距。
• margin-left：左外边距。

margin 可以设置 1 ~ 4 个属性值：

1. 一个属性值：一起设置上下左右。
2. 两个属性值：分别设置上下、左右。
3. 三个属性值：分别设置上、左右、下。
4. 四个属性值：分别设置上右下左。

margin 的值可以是以下几种：

• ：使用一个有单位的长度值。可以使用负值。
• ：使用一个百分比值。相对于元素的包含块的宽度。
• auto：让浏览器自动计算外边距的大小，通常用于设置块级元素水平居中或平均分配空间。
• inherit：继承父元素的外边距。

div {
    width: 500px;
    height: 500px;
    background-color: antiquewhite;
    margin: 0 auto; /* 设置块级元素水平居中 */
}

margin 合并问题

相邻元素之间

如果两个元素是同一父元素的相邻子元素，那么它们的上下外边距会合并。

可能会发生的情况：

1. 两个值为正，取较大值。
2. 一正一负，取相加的结果。
3. 两个都为负，取绝对值较大的负数。

在实际开发中，我们只需要留意这种情况的发生即可，不需要去解决。

父子元素之间

如果一个元素的上外边距和它的一个或多个后代元素的上外边距之间没有边框、内边距、内联内容来分隔；或者一个元素的下外边距和它的一个或多个后代元素的下外边距之间没有边框、内边距、内联内容、高度或最小高度来分隔，那么这些外边距会合并。合并后的外边距会出现在父元素的外面。

BFC（Block Formatting Context，块级格式化上下文）可以解决父子元素之间的 margin 合并问题。

会发生父子元素之间的 margin 合并问题的原因是，父元素无法计算出自身的边界。当一个元素形成 BFC 时，它会创建一个独立的渲染环境，使得元素内部的布局与外部元素隔离开来。在创建独立的渲染环境时，父元素就能计算出自身的边界，所以可以解决父子元素之间的 margin 合并问题。

以下类型的元素能形成 BFC：

1. 根元素（）。
2. float 不为 none 的元素。
3. position 为 absolute / fixed 的元素。
4. display 为 inline-block 的元素。
5. overflow 值不为 visible 的块级元素。
6. 弹性盒子（display 为 flex / inline-flex），其中的子元素不是弹性盒子、网格容器或表格容器（display 为 table / inline-table）。
7. 网格容器（display 为 grid / inline-grid），其中的子元素不是弹性盒子、网格容器或表格容器（display 为 table / inline-table）。

<div class="bfc">
    <div>div>
    <div>div>
div>

.bfc {
    background: antiquewhite;
    overflow: hidden; /* 创建新的 BFC */
}

.bfc div {
    width: 50px;
    height: 50px;
    background: wheat;
}

.bfc div:nth-child(1) {
    margin: 10px;
}

.bfc div:nth-child(2) {
    margin: 20px;
}