网页开发：两元素总外边距为何是10px而非15px？

这是CSS里的**垂直外边距折叠（Margin Collapsing）**特性，简单说就是块级元素的垂直外边距不会叠加，而是取两个值里较大的那个。

你遇到的场景就是最典型的相邻兄弟元素折叠：

• 元素一的margin-bottom: 10px
• 元素二的margin-top: 5px

这两个垂直外边距会合并成一个，大小是两者中的最大值——10px，而不是10+5=15px。

常见的外边距折叠场景还有这些： #

• 父元素和第一个/最后一个子元素之间，如果父元素没有设置padding、border，也没有内联元素（比如文字、图片）分隔父子元素的外边距，那么父元素的上下外边距会和子元素的对应外边距折叠。
• 空的块级元素，自身的margin-top和margin-bottom也会折叠成一个值。

举个实际代码例子验证：

<div class="box">元素一</div>
<div class="box">元素二</div>

.box:first-child {
  margin-bottom: 10px;
  background: #eee;
}
.box:last-child {
  margin-top: 5px;
  background: #ddd;
}

你可以在浏览器里检查两个盒子之间的间距，会发现是10px而不是15px。

注意：只有垂直方向的块级元素外边距会折叠，水平外边距不会有这个特性，水平方向的外边距是直接相加的。

内容的提问来源于stack exchange，提问作者Harvey