html - 父级中的最后一个元素 - 边距未生效？

Question

<p>最后一个元素是a还是等都没关系，<h1>为什么最后一个元素的margin没有生效？

它应该将父容器背景向下推。

.container {
  background: grey;
}

h1 {
  margin-bottom: 3em
}

p {
  margin-bottom: 5em
}

<div class="container">
  <h1>Title</h1>
  <p>Content.</p>
</div>

标签： htmlcss

Answer 1

只需使用填充在框中创建空间。谷歌关于盒子模型。

.container {
  background: grey;
}

h1 {
  margin-bottom: 3em
}

p {
  padding-bottom: 5em
}

<div class="container">
  <h1>Title</h1>
  <p>Content.</p>
</div>