添加 1px 填充会导致外部 div 包含子边距

Question

当 div 的子项包含边距时，这些边距不包括在 div.offsetHeight 的计算中。 Except，但是，当您对父级 div 执行某些操作时，包括给它 1px 的填充。

下面的代码导致 div 的报告高度从 38px 跳到 83px（"right" 大小，包括子边距）。为元素添加边框效果相同。

这是怎么回事？这是定义的行为吗？另外，如果没有这个 1px hack，是否仍然可以获得元素的实际高度（包括子边距，但不包括它自己的边距）？

（这个问题的上下文是我在 window 调整大小时调整 iframe 的大小，并且只有在包含 1px 填充时计算才能正常工作。）

var hasPadding = false;

var alertDivHeightButton = document.getElementById('2');
alertDivHeightButton.onclick = alertDivHeight;
var togglePaddingButton = document.getElementById('3');
togglePaddingButton.onclick = togglePadding;

function alertDivHeight () {
    var div = document.getElementById('1');
    alert("width of div: " + div.offsetHeight);
}

function togglePadding () {
    var div = document.getElementById('1');
    if (hasPadding) {
        div.style.padding = '0px';
        togglePaddingButton.value = "Add 1px padding";
    } else {
        div.style.padding = '1px';
        togglePaddingButton.value = "Remove 1px padding";
    }
    hasPadding = !hasPadding;
}

<div id="1">
    <h1>Hello, world</h1>
</div>

<input type="button" id="2" value="Alert div height">
<input type="button" id="3" value="Add 1px padding">

JSFiddle

Answer 1

正如 Hashem 在评论中指出的那样，问题在于利润率的下降。父项 div 与其父项之间没有任何关系，因此 div 的子项 h1 的边距变为 its 边距。如果 div 有填充或边框，这可以防止边距折叠。

为了让边距不塌陷，我们可以在父元素上使用:before和:after伪元素div:

#a1:before, #a1:after{
    content: '';
    display: table;
}

这会稍微改变子元素的位置，但无论填充如何，它都会保持高度一致，并导致子边距包含在 div.offsetHeight

中

我在另一个答案中找到了这个技巧 here。

updated JSFiddle

添加 1px 填充会导致外部 div 包含子边距

Adding 1px padding causes outer div to contain child margins

css

margin

padding

offsetheight