Почему margin-top ребёнка двигает родителя?

Когда двигаю марджином блок, то двигается и родитель. Почему так? Не должен ли этот блок наоборот - отталкиваться от него?

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #000;
}

.container-inner {
  width: 80%;
  height: 200px;
  background-color: green;
  margin-top: 50px;
}
<div class="container">
  <div class="container-inner"></div>
</div>


Ответы (1 шт):

Автор решения: Роман Мереняну-Ени

Почитайте Схлопывающиеся отступы - http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy Чтобы этого не было, добавьте родительскому блоку: overflow: auto.

→ Ссылка