Last element's margin-bottom wont stretch its container

Question

I wonder why .content-b 's margin-bottom wont stretch the .container ?

.container {
  background: grey;
}

.content-a,
.content-b {
  height: 100px;
  border: 1px solid red;
  margin-bottom: 100px;
}

<div class="container">
  <div class="content-a"></div>
  <div class="content-b"></div>
</div>

If you inspect .content-b you can see that the browser renders the margin, and would push down the elements below it if there were any, but shouldn't it stretch the container itself?

fiddle

No, it shouldn't, because of how margin collapsing works. You can use `overflow: auto` or similar tricks to force a new context. — Niet the Dark Absol, Jan 29 '19 at 16:40

score 1 · Accepted Answer · answered Jan 29 '19 at 16:43

add overflow: auto; to your container:

  .container {
  background: grey;
  overflow: auto;
}

.content-a,
.content-b {
  height: 100px;
  border: 1px solid red;
  margin-bottom: 100px;

<div class="container">
  <div class="content-a"></div>
  <div class="content-b"></div>
</div>

score 1 · Answer 2 · answered Jan 29 '19 at 16:55

Having a margin would make it simply just overflow.

The default value of overflow is visible, meaning it will be displayed outside of the container, and your margin doesn't have a background colour.

give your container an overflow: auto property would do

Last element's margin-bottom wont stretch its container

2 Answers2