1

Why there is this white space above my containers, 

* {
    padding: 0;
    margin: 0;
}

.hamburger {
    position: relative;
    background: #eee;
}

.bar {
    background: orange;
    position: relative;
    margin-top: 150px;

}
<div class="hamburger" id="hamburger-1">
   <div class="bar">hi</div>
   <div class="bar">hi</div>
   <div class="bar">hi</div>
</div>

<div class="hamburger" id="hamburger-2">
   <div class="bar">hi</div>
   <div class="bar">hi</div>
   <div class="bar">hi</div>
</div>

<div  class="hamburger" id="hamburger-3">
    <div class="bar">hi</div>
    <div class="bar">hi</div>
    <div class="bar">hi</div>
</div>

When i add margin-top: 150px for .bar elements seems i get white space above the whole container not inside it, this is unexplained to me!!

Can anyone explain this bahavior??

Andrew Kovalchuk
  • 897
  • 1
  • 10
  • 29
Code Eagle
  • 1,293
  • 1
  • 17
  • 34
  • basically it is caused by the child margin collapsing outside it's parent, from [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing): *If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-top of a block from the margin-top of its first child block; or no border, padding, inline content, height, min-height, or max-height to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.* – Pete Feb 25 '19 at 16:06
  • ok sorry you are right at the end!!...thanks – Code Eagle Feb 25 '19 at 16:15

0 Answers0