Last element in parent - margin not taking effect?

Question

It doesn't matter if last element is a <p> or <h1> etc. Why does the last elements margin fail to take an effect?

It should push the parents container background down.

.container {
  background: grey;
}

h1 {
  margin-bottom: 3em
}

p {
  margin-bottom: 5em
}

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

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing. I'm positive there are several dupes of this question — j08691, Apr 30 '19 at 13:23
That's margin-collapse, check j08691's link. Just Google it, but there are ways to prevent this, e.g. with `.container:after { content: ''; display: table; }` or by adding padding `.container{ padding-bottom: 1px; }` — elveti, Apr 30 '19 at 13:25

score 0 · Answer 1 · answered Apr 30 '19 at 13:26

0

Just use padding to create space in box. Google about box model.

.container {
  background: grey;
}

h1 {
  margin-bottom: 3em
}

p {
  padding-bottom: 5em
}

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

answered Apr 30 '19 at 13:26

Heinz Schilling

1 Answers1