Css 计算身高和儿童边缘的奇怪行为

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

第一部分：122px:OK（子级高度100px，子级边距20px，边框2px）

第二分区：120px:OK（子级高度100px，子级边距20px）

第三分区：100px:什么？利润在哪里

---

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

我想你会对这件事感到惊讶

边距塌陷的两种情况是相邻同级元素之间以及父元素和子元素之间

在你的例子中，是父/子折叠引起了你的悲伤：如果你在父/子的上边距和（第一个子的上边距|最后一个子的下边距）之间没有什么有趣的东西，那么父/子折叠就会折叠。透明边界黑客通常用于这些情况

---

您可能注意到它并没有改变实际的布局值，

p

标记的边距防止可见元素相互折叠。但我承认这是违反直觉的。

这就是所谓的边际崩溃。 当给子元素留有边距，而父元素中没有任何内容时，就会发生这种情况

添加这个类并完成它

.no-bordered{
    overflow:auto;
}

---

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

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

就像你做的那样，这对我来说就像是一个怪癖，因为我不知道。元素选择器，如果你查看控制台内部，你会发现样式选项卡中没有应用边距，但只计算了计算的高度，可能对于某些奇怪的行为，它不支持正常工作。直到我知道只有高度、宽度和填充才是真正的元素尺寸。

---

边距不应考虑实际元素维度，这只是一个IE问题，由谁来计算将边距添加到实际元素维度

尝试将

div{overflow:auto；}

添加到CSS中，看看会发生什么。哦……这可能与……有关，但不幸的是，我目前没有时间详细阐述。

.no-bordered{
    overflow:auto;
}

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