Почему не происходит схлопывание margin?

Question

У меня есть родитель, внутри которого расположен дочерний элемент. Можно увидеть, что схлопывание марджинов происходит только сверху родительского элемента. Например:

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

.parent {
  width: 300px;
  height: 300px;
  background: green;
  margin: 0 auto;
}

.child {
  width: 50px;
  height: 100%;
  background: yellowgreen;
  margin-top: 80px;
}

<div class="parent">
  <div class="child"></div>
</div>

"Внизу" родительского элемента этого схлопывания не происходит.

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

.parent {
  width: 300px;
  height: 300px;
  background: green;
  margin: 0 auto;
}

.child {
  width: 50px;
  height: 100%;
  background: yellowgreen;
  margin-bottom: 80px;
}

<div class="parent">
  <div class="child"></div>
</div>

Нижний отступ дочернего элемента игнорируется. Хотя по идее должно быть так:

Margin самого контейнера и margin первого блока накладываются, и в итоге место перед контейнером равно наибольшему из них. Тоже самое происходит и внизу с нижними margin'ами контейнера и последнего вложенного блока.

Проблема в том, что в последнем примере элемент не является последним? Вот:

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

.parent {
  width: 300px;
  height: 300px;
  background: green;
  margin: 0 auto;
}

.child {
  width: 100%;
  height: 50%;
  background: yellowgreen;
}

.child_2 {
  width: 100%;
  height: 50%;
  background: purple;
  margin-bottom: 80px;
}

<div class="parent">
  <div class="child"></div>
  <div class="child_2"></div>
</div>

Результат тот же... Чего именно я не понимаю?

БЛОГ НА HUSL

Почему не происходит схлопывание margin?

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