html - 元素不推离直接父级 Div

Question

为什么<h#>默认情况下元素边距（用户代理样式表）不会将父级div推开？

相反，该<h2>元素会从浏览器窗口推开。

编辑：在 chrome 中将以下内容作为 html 文档打开。div 紧挨着<h2>元素，但由于<h2>

编辑 2：在margin-top:50px. <h2>为什么div不受此保证金的影响？

在此处输入图像描述

<html>
   <div id="does-not-push-away">
        <h2>Heading<h2>
    <div>
</html>

score 2 · Accepted Answer

我相信这都是关于利润崩溃的。三种基本类型之一。这是MDN 解释中的相关段落：

如果没有边框、内边距、内联内容或间隙将块的外边距顶部与其第一个子块的外边距顶部分开，或者没有边框、内边距、内联内容、高度、最小高度或最大值-height 将块的边距底部与其最后一个子块的边距底部分开，然后这些边距折叠。折叠的边距最终在父级之外。

你的父块是 your <div id="does-not-push-away">，它的第一个子块是 your <h2>。将 1px 的填充（或透明边框，或任何东西）添加到中<div>，您应该会看到所有<h2>的边距“将其推开”。

这里有一支笔来说明：http<h2> ://codepen.io/MisterGrumpyPants/pen/fLmqF（请注意我应用到元素的边距底部如何发生相同的边距塌陷——）

score 1 · Accepted Answer

<h2>当然有默认保证金值。您可以通过添加 css 看到不同之处：

.does-not-push-away{
    border: 1px solid #ff0000;
    padding: 5px;
}
.does-not-push-away h2{
    margin: 0;
    text-align: center;
}

更新 1

好的兄弟，这是事实：

如果你也想<div>获得利润，你也应该给予margin-top。你可以检查这个小提琴。希望这可以帮助 ;）

score 0 · Accepted Answer

您也可以使用overflow: hiddenoroverflow: auto在div其他答案中所述的而不是边框或填充上。

3 回答 3