CSS：与 2 个不同的类和不同的边距相交 2 div - 异常还是预期行为？

Question

我想了解的内容：

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

问题：当具有两个不同类的两个不同div相交时(div 1的边距底部和div 2的边距顶部(，具有较高边距值的div将使用上一个div边距(从上一个div计算边距高度，只加上差值(？这是预期的行为吗？

有人知道在浏览器上测量/显示PX中两个对象之间距离的工具吗(div/images/paragraph等(。一些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. 如果两个值都是负数，则仅从具有较低(更负(裕度的元素中获取marign
3. 但请注意：如果一个值为负值，另一个值是正值，则添加两个裕度(=负值从正值减去(，并且使用的裕度NOW将是两者的结果

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

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

这是一个博客，广告很好，更接近解释：
https://css-tricks.com/what-you-should-know-about-collapsing-margins/