计算高度和儿童边距的奇怪行为答案

【问题标题】：Strange behavior on computed height and childrens margin计算高度和儿童边距的奇怪行为
【发布时间】：2014-04-25 05:10:42
【问题描述】：

我想知道一个元素的真实高度，不管它里面有什么。这很容易。当我收起元素的边界并注意到一个奇怪的行为时，问题就开始了，请看这里： http://jsfiddle.net/LypZR/

第一个 div： 122px：OK（子项高度 100px，子项边距 20px，边框 2px）

.bordered {
    border: 1px solid #000;
}

第二个 div： 120px：OK（子项高度 100px，子项边距 20px）

.display-inline-block {
    display: inline-block;
}

第三格： 100px：什么？边距在哪里？

我使用 display: inline-block 解决了这个问题，这对我来说很好（在这种特殊情况下）。但我真的很想知道到底发生了什么。

【问题讨论】：

尝试将 div {overflow:auto;} 添加到您的 CSS 中，看看会发生什么。呵呵……
它可能与Collapsing Margins 有关，但遗憾的是我目前没有时间详细说明。

标签： css

【解决方案1】：

我认为您对margin collapsing 感到惊讶。

margin折叠的两种情况是相邻兄弟元素之间和父子元素之间。

在您的情况下，导致您悲伤的是父/子崩溃：如果您的父母的上边距和（其第一个孩子的上边距|其最后一个孩子的下边距）之间没有任何有趣的东西，则父母边距崩溃。在这些情况下，通常使用透明边框 hack。

您可能注意到它并没有改变实际的布局值——p 标签的边距防止可见元素相互折叠。但我承认这是违反直觉的。

【讨论】：

【解决方案2】：

这称为边距折叠。当子元素被赋予边距并且父元素中没有任何内容时，就会发生这种情况。

添加这个类并完成。

.no-bordered{
    overflow:auto;
}

小提琴：http://jsfiddle.net/LypZR/3/

【讨论】：

【解决方案3】：

如果您对所有元素使用正确的 css 选择器*，您可以看到真实高度而不会折叠，所以：

* {
    height: 100px;
    margin: 10px;
}

就像你做的那样，这对我来说就像一个怪癖，因为我不知道 .element 选择器，如果你查看控制台内部，你会看到样式选项卡中没有应用边距，但只计算了计算高度，也许对于一些奇怪的行为，它不应该正常工作。直到我知道只有高度宽度和填充对于实际元素尺寸是体贴的。对于实际元素尺寸，边距不应该考虑在内，这只是一个 IE 问题，他们会在实际元素尺寸上添加边距。 jsfiddle

【讨论】：