margin increase height of parent

Question

Hello, why margin bottom of child not increasing the height of parent:

<div class="my-container">
<div class="margin">
    Hello World
</div>
<div class="margin">
    Hello World
</div>

.my-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
background-color: #3873fe;
margin: auto;
}

.my-container .margin {
    width: 100px;
    margin: 0 auto 50px;
    background-color: #00ff82;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

But if add border for parent, the height of parent will increased:

.my-container {
    border:1px solid;
}

So I'd like to understand why this difference?

Have a google for css collapsing margins - this will explain why the bottom margin does not affect the parent div — Pete, May 02 '17 at 09:11
Pete's comment is better answer when the two answers so far as it explains the actual reason. — Morpheus, May 02 '17 at 09:14
True, @Pete found the origin of the problem I just know how to fix it, didn't know what was the original behavior. Always learning new things ! :) — Troyer, May 02 '17 at 09:15

score 5 · Accepted Answer · edited May 02 '17 at 09:14

5

You need to add overflow: auto; to the parent div.

.my-container {
  overflow: auto;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 300px;
  background-color: #3873fe;
  margin: auto;
}

.my-container .margin {
  width: 100px;
  margin: 0 auto 50px;
  background-color: #00ff82;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<div class="my-container">
  <div class="margin">
    Hello World
  </div>
  <div class="margin">
    Hello World
  </div>
</div>

edited May 02 '17 at 09:14

athi

1,683
15
26

answered May 02 '17 at 09:09

Troyer

6,765
3
34
62

Thank you, I know the solution but I'd like to know what is the reason?! – Michael Neas May 02 '17 at 09:24
The problem as @Pete told us is collapsing margins, you can have more information about there: http://stackoverflow.com/questions/3069921/what-is-the-point-of-css-collapsing-margins – Troyer May 02 '17 at 09:26
@MichaelNeas If my answer was the correct one you can mark it as the correct answer. :) – Troyer May 02 '17 at 09:44

score 0 · Answer 2 · answered May 02 '17 at 09:09

Use display: inline-block and width: 100% for my-container. Fiddle

CSS

.my-container {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 300px;
background-color: #3873fe;
margin: auto;
}

.my-container .margin {
    width: 100px;
    margin: 0 auto 50px;
    background-color: #00ff82;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    width: 100%;
}

margin increase height of parent

2 Answers2