HTML/CSS中如何计算两个相邻元素边距间的实际像素距离

这是CSS垂直外边距折叠（margin collapsing）的标准场景，按CSS规范计算即可。

示例代码 #

HTML结构 #

原示例中p标签存在书写位置错误，修正后合法结构如下：

<div class="container">
  <p class="A">One</p>
  <p class="B">Two</p>
</div>

CSS样式 #

.A { margin-bottom: 40px; }
.B { margin-top: 10px; }
.container { height: 50px; }

计算逻辑与结果 #

• 普通文档流中，上下相邻的块级元素如果没有被BFC、元素边框、内边距阻隔，垂直方向的外边距会发生折叠：两个元素间的实际间距不是上下外边距的数值之和，而是取两个外边距数值中的较大值。
• 本场景下.A的下外边距为40px，.B的上外边距为10px，取两者最大值，最终.A与.B之间的实际像素距离为40px。
• 父容器.container设置的50px高度不会影响该间距结果：由于父容器未设置边框、内边距，也未触发BFC，无法阻隔子元素的外边距折叠规则生效，子元素的间距计算不受父元素固定高度限制。

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