CSS：使用 2 个不同的类和不同的边距相交 2 个 div - 异常或预期的行为？

Question

我想了解的：

1. 边距合并（div 1 的边距底部与 div2 的边距顶部）是否在 2 个不同的 div 相交时具有相同的值？好像是这样！
2. 如果 2 个不同的 div 相交时的值相同，则填充不合并（div 1 的底部边距与 div2 的顶部边距）？好像是这样！
3. 当 2 个具有不同填充的不同 div 相交时，每个 div 都会尊重他的填充，所以，基本上它们之间的高度/距离会比使用边距更高（因为填充不合并）？好像是这样！

问题： 当 2 个不同的 div 与 2 个不同的类相交时（div 1 的底部边距与 div2 的顶部边距），具有较高边距值的 div 将使用前一个 div 边距（计算边距高度从以前的 div 并且只会添加差异）？这是预期的行为吗？

有没有人知道一种工具来测量/显示浏览器上 2 个对象之间的 PX 距离（div/图像/段落等）。一些 Firefox / Chrome 插件？

.div1-margin {
margin: 32px 0;
background-color: #fcfcc0;
}
.div2-margin {
margin-top: 132px;
background-color: #c0fcf9;
}
.div1-padding {
padding: 32px 0;
background-color: #c5fcc0;
}
.div2-padding {
padding-top: 132px;
background-color: #ecc0fc;
}
h2.h2margin {
color: blue;
padding: 0!important;
margin: 0!important;
font-size: 18px;
}
h3 {
font-size: 18px;
color: green;
padding: 16px 0;
}
h2.h2padding {
color: red;
padding: 0!important;
margin: 0!important;
font-size: 18px;
}

<h2 class="h2margin">Here div 2 have margin top 132px and div 1 have margin bottom 32px.</h2>
<div class="div1-margin">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>
<div class="div2-margin">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum portes factures. 
</div>
<h3>Total distance (space) above between div 2 and div 1 will be 132px? (margin used)</h3>
<h2 class="h2padding">Here div 2 have padding top 132px and div 1 have padding bottom 32px.</h2>
<div class="div1-padding">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
</div>
<div class="div2-padding">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum portes factures. 
</div>
<h3>Total distance (space) above between div 2 and div 1 will be 164px? (padding used)</h3>

Answer 1

确实，边距可能很难看……这是关于浏览器如何处理边距的 CSS 规范。

如果以下两个元素具有：margin-bottom 和（以下）margin-top，则每次都不会添加边距。在这种情况下，最重要的规则是：

1. 如果两个值都是正数，则仅从具有较高边距的元素中获取边距。
2. 如果两个值都是负数，则仅从具有较低（更多负）边距的元素中获取边距。
3. 但请注意：如果一个值为负，另一个为正，则添加两个边距（= 从正值中减去负值）并且使用的边距 NOW 将是两者的结果.

因此，当您在示例中仅使用正值时：margin-bottom 和 margin-top 由于规范未添加。使用填充不受此规则的影响，因此 INNER 元素距离的结果是相加的结果。

在许多grid-frameworks 中，填充用于设置距离而不是边距。

这是一个博客，里面有更好的解释：
https://css-tricks.com/what-you-should-know-about-collapsing-margins/