为什么边距在父div边界之外

Question

当我在h2元素上有一个边距时，该边距在父div之外，因此父div的背景不覆盖该边距。

如果我把它做成填充物，它就会修复。

我想要第二个带有填充的行为，其中灰色背景覆盖了空白。

但这对margin不起作用，我想知道为什么它对margin和padding不起作用。我希望它能对margin的使用起作用。

html, body {
padding: 0;
margin: 0;
}
.section {
background: #ccc;
}
.margin {
margin: 1em 0;
}
.padding {
padding: 1em 0;
}

<div class="section">
<div id="app">
<h2 class="margin"> Title </h2>
</div>
</div>
<p>Content</p>
<div class="section">
<div id="app">
<h2 class="padding"> Title2 </h2>
</div>
</div>

Answer 1

尝试将容器元素显示为块元素以约束子元素。

section {
display:block; width:100%; background: #ccc;
}

Answer 2

Margin是两个元素之间的空间，而padding是元素内部的空间。

您的背景仅适用于元素，而不适用于元素之间的空间，即边距。

html, body {
padding: 0;
margin: 0;
}
.section {
background: #ccc;
border:1px solid transparent;
}
.margin {
margin: 1em 0;
}
.padding {
padding: 1em 0;
}

<div class="section">
<div id="app">
<h2 class="margin"> Title </h2>
</div>
</div>
<p>Content</p>
<div class="section">
<div id="app">
<h2 class="padding"> Title2 </h2>
</div>
</div>