当我添加margin-top时，我的容器上方有无法解释的空间？

Question

为什么我的容器上方有空白

* {
    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>

当我为margin-top: 150px元素添加.bar时，似乎整个容器上方都留有空格，而不是在其中，这是我无法解释的！！

谁能解释这个行为？