javascript - 为什么边距在父 div 范围之外

Question

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

如果我将其设为填充，则可以修复。

我想要第二个带有填充的行为，灰色背景覆盖了边距。

但这不适用于边距，我想知道为什么它不适用于边距并适用于填充，并且我希望它与边距使用一起使用。

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>

标签： javascripthtmlcss

Answer 1

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

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