CSS:交叉2 div与两个不同的类别和不同的边缘应用-异常还是预期的行为？

Question

我想了解的是：

1. 边缘合并( div 1的边缘底部和div2的边缘顶部)当两个不同的div相交时是否有相同的值？看起来是这样的！
2. 填充不合并( div 1的边缘底部和div2的边缘顶部)当两个不同的div相交时是否是相同的值？看起来是这样的！
3. 当两个不同的div与不同的填充相交时，每个div都会尊重他的填充，那么，它们之间的高度/距离基本上会比使用边距高(因为填充不合并)？似乎是这样！

问题:当两个不同的div与两个不同的类相交( div 1的边缘底部与div2的边缘顶部)时，较高的div值的div将使用以前的div边距(计算以前div的边缘高度，并且只会增加差额)？这就是预期的行为吗？

有没有人知道一个工具可以测量/显示浏览器上两个对象(div /图像/段落等)在PX中的距离。一些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. ，但请注意:如果一个值为负值，另一个值为正边距(=负值从正值减去)，使用的裕度NOW将是两者的结果。

G 211

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

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

下面是一个更贴切的解释的博客：

https://css-tricks.com/what-you-should-know-about-collapsing-margins/