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

This question already has answers here:

CSS margin terror; Margin adds space outside parent element
                                
                                    （5个答案）
                                
                        
                                9个月前关闭。
            
                    
最后一个元素是<p>还是<h1>等都无关紧要。为什么最后一个元素的边距不能生效？

它应该将父容器的背景推低。

.container {
  background: grey;
}

h1 {
  margin-bottom: 3em
}

p {
  margin-bottom: 5em
}

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

最佳答案

只需使用填充在框内创建空间即可。 Google关于盒子模型。

.container {
  background: grey;
}

h1 {
  margin-bottom: 3em
}

p {
  padding-bottom: 5em
}

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