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

#html #css

Вставляю блок, и даю ему margin-top: 50px - и он сдвигает родителя body в данном
случае. Почему так происходит? 

Если же дать padding-top: - тогда ок все



* {
  margin: 0;
  padding: 0;
}

body {
  outline: 1px solid red;
}

.logo-bg {
  outline: 1px solid orange;
  width: 100px;
  height: 100px;
  margin-top: 50px;
}

  Logotype




    

Ответы

Ответ 1

Это называется Выпадание внешних отступов (margin'ов)

Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний
блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ
сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.

Если у родительского элемента тоже был задан внешний отступ, то выберется максимальный
отступ между собственным и «выпавшим».
Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний
отступ (паддинг) сверху или добавить рамку сверху (border-top: 1px solid transparent).

Внешние и внутренние отступы всегда складываются.


Ответ 2

Похоже на своеобразное "схлопывание".
Еще здесь есть более подробная инфа.
В данном примере достаточно заменить у body outline на border или задать padding.