margin 重叠

margin 重叠

外边距重叠是发生在垂直方向，而不是水平方向。初衷是为了段落美观。

发生在块级元素上，不是行内，也不是行内块上。

如何重叠

块的上下外边距有时会合并为单个边距，其大小为单个边距的最大值。边距折叠。

产生的方式

有三种情况

同一层项链元素之间

相邻的两个元素之间的外边距重叠.

p:nth-child(1) {
    margin-bottom: 13px;
}
p:nth-child(2) {
    margin-top: 87px;
}

会选用 87px 作为两个块之间的外边距.

::: tip 解决方案。

给后一个元素添加 清除浮动.

p:nth-child(2)::after {
    content: "";
    display: block;
    clear: both;
}

:::

空的块级元素

当一个块元素上边界 margin-top 直接贴到元素下边界 margin-bottom 时也会发生边界重叠.

p {margin: 0};
div {margin-top: 30px; margin-bottom: 50px};

<p>上边界</p>
<div></div>
<p>下边界</p>

::: tip 解决方案
解决方案。
给空块添加边框、内边距、高度、最小高度、最大高度、设定内容为 inline 或是加上 clear-fix。
:::

这种会渲染为 50px 的外边距，但是它的 盒模型还是 80px; <p>下边界</p>会顶上去。

没有内容

块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top. 会造成 margin 重叠。

section {margin-top: 13px};
header {margin-top: 87px};
<section>
    <header>上边界重叠87px</header>
</section>

最终将会使得 section 的 margin-top 也会下到 87px 的位置。

::: tip 解决方案。
加边框、内边距、行内内容，或者创建块级格式上下文或清除浮动 来达到分开块上边界 margin-top 与后代的 margin-top;
:::

一个块级元素的下边界 margin-bottom 与其内的一个或多个后代元素的上下边界 margin-bottom ，会出现父和子的 margin 重叠。重叠部分会益处到父块的外面。

section {margin-bottom: 87px;}
footer {margin-bottom: 13px;}

<section>
    <footer>下边界 87</footer>
</section>

后代元素 footer 是 13px, section 87px , 最终会合并为 87px.

::: tip 解决方案。
加边框、内边距、行内内容，高度、最小高度或最大高度来分开块元素的下边界 margin-bottom 和子元素的 margin-bottom.
:::

注意

1. 设有 float 的元素不会产生外边距重叠的行为。

2. 设有 position: absolute; 的元素不会产生外边距重叠。