Question

我想知道一个元素的真实高度，无论它里面有什么。这很简单。当我收起元素的边框并注意到一个奇怪的行为时，问题就开始了，请在此处查看： 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;
}

Thirth div： 100px：什么？利润在哪里？

我用display：inline-block解决了它对我来说很好（在这种特殊情况下）。但我真的想知道究竟发生了什么。

Answer 1

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

边距崩溃的两种情况是在相邻的兄弟元素之间以及父元素和子元素之间。

在你的情况下，父母/子女的崩溃导致你的悲伤：如果你的父母的上边缘与其最后一个孩子的第一个孩子的上边缘之间没有任何兴趣，那么保证金崩溃。在这些情况下，通常使用透明边框黑客。

您可能已经注意到它没有更改实际布局值 - p标记的边距使可见元素不会相互折叠。但我承认这是违反直觉的。

Answer 2

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

添加此课程及其完成。

.no-bordered{
    overflow:auto;
}

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

Answer 3

如果对所有元素*使用正确的css选择器，你可以看到没有任何崩溃的真实高度，所以：

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

就像你做的那样，对我来说就像一个怪癖，因为我不知道.element选择器，如果你看一下consolle里面，你会发现在样式选项卡中没有应用任何边距，但是只计算计算出的高度，也许对于某些奇怪的行为，它不能支持正常工作。直到我知道只有高度宽度和填充是考虑到真实的元素尺寸。边际不应该考虑真实的元素维度，这只是一个IE问题，他们会对实际元素维度进行这样的计算。 jsfiddle

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

3 个答案: