外边距重叠及解决

发表于 | 更新于 | 分类于

CSS盒模型（box model）

每一个 HTML 元素都可以看作一个盒子，每一个盒子包括：外边距，边框，内边距，和实际内容。

  • margin：外边距。边框外的区域。
  • border：边框。
  • padding：内边距。边框到内容之间的填充部分。
  • content：盒子的实际内容。

外边距重叠（collapsing margins）

外边距重叠是指两个或多个盒子（可能相邻也可能嵌套）的相邻边界（其间没有任何非空内容、补白、边框）重合在一起而形成一个单一边界。
box1的margin-bottom为10px ，box2的margin-top为10px，重叠之后box1与box2距离为10px。

1
2
3
4
5
6
7
8
<body>
    <div style="margin-bottom:10px;width:100%;height:100px;background:#b72afc;">
    box1
    </div>
    <div style="margin-top:10px;width:100%;height:100px;background:#23d2fc;">
    box2
    </div>
</body>

重叠后外边距的计算：

  1. 相邻的margin都是正值，取最大值。
  2. 相邻的margin都是负值，取绝对值大的，从零开始，负向位移。
  3. 相邻的margin既有正值也有负值，则都取绝对值，然后用正值减去最大值。

特殊情况：

  1. 水平边距不会重叠。
  2. position:absolute、float、display:inline-block及块级格式化上下文不会重叠。
  3. 根元素的垂直margin不会被重叠。

外边距重叠的解决方法——BFC

BFC

块级格式化上下文（Block Formatting Context，BFC）是一个独立的渲染区域，它规定了内部的元素如何布局，并且与这个区域外部无关。满足任意一个条件的元素会触发BFC：

  1. 根元素 html。
  2. 绝对定位（position:avsolute、position:fixed）。
  3. 浮动（float的值不为none）。
  4. overflow 的值不为visible。
  5. display 为inline-block（行内块）、table-cell（表格单元格）、table-caption（表格标题）、flex和inine-flex（弹性盒子）
    （display:table并不会触发BFC，table会默认生成一个匿名的table-cell来触发BFC）。

BFC布局规则：

  1. BFC的子元素会垂直排列。
  2. 子元素的外边距在垂直或者水平方向均会重叠。
  3. BFC不会与float元素区域重叠。
  4. BFC的子浮动元素参与BFC高度计算。

使用BFC来避免外边距重叠

为box1添加父元素并触发BFC，box1与box2边距将不会重叠，距离为20px。

1
2
3
4
5
6
7
8
9
10
<body>
    <div style="overflow:hidden;">
        <div style="margin-bottom:10px;width:100%;height:100px;background:#b72afc;">
        box1
        </div>
    </div> 
    <div style="margin-top:10px;width:100%;height:100px;background:#23d2fc;">
    box2
    </div>
</body>