Почему сдвигается общий div, а не вложенный?

Question

[titronfan]

Здравствуйте!
Вот пример:

<div style="width:200px; height:200px; background:#ccc;">
   <div style="margin-top:20px;">123</div>
</div>

Почему при отступе сдвигается общий div, а не внутренний?

Answer 1

[Алексей Зуев]

Потому что вам нужно почитать про margin collapsing
Вместо margin используйте padding, либо overflow:hidden родителю, либо этот вариант

Answer 2

[TomasHuk]

Из урока HTML Academy:

«Выпадание» внешних отступов [10/23]
«Выпадание» — это еще один эффект, связанный с вертикальными внешними отступами. Если внутри родительского блока расположить блок и задать ему отступ сверху, то внутренний блок прижмется к верхнему краю родительского, а у родительского элемента появится отступ сверху. Т.е. верхний отступ внутреннего элемента «выпадает» из родительского элемента.

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

Чтобы избавиться от эффекта выпадания, можно задать родительскому элементу внутренний отступ (паддинг) сверху или добавить рамку сверху.

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

Comments

[Евгений Петров]

Ответ, что вы скопировали, весьма неполный и неточный.
Не учитывается понятие flow root (он же visual formatting context), созданный как за счёт display, так и других правил (например, ovefflow).

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

Нет, не всегда.

Answer 3

[Camaro67]

Это называется схлопывание. Информации на этот счет в гугле достаточно.

Можете сделать так:

<div style="width:200px; height:200px; background:#ccc;">
   <div style="position: relative; top:20px;">123</div>
</div>

Comments

[Евгений Петров]

Создавать отступ за счёт position:relative — жесть.

[Camaro67]

Евгений Петров: Это было только как пример, я не заставляю кого-то его использовать.
Моему ответу конечно же до вашего комментария (который несомненно очень помог человеку) далеко.

Answer 4

[Максим Тюльпаков]

Добавим инфографики: