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

Вставляю блок, и даю ему 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

Ответ

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