Задание [10/23] - «Выпадание» внешних отступов


#1

Добрый день. Прохожу данный урок и немного непонятно следующее:

body {
padding: 0 20px;

}

.block-1 {
height: 100px;
border: none;
text-align: center;
margin-top: 40px;

}

.block-2 {
margin-top: 20px;
text-align: center;

}

Почему при отключении рамок (border: none;) у Блока 1 при добавлении верхнего внешнего отступа margin-top элементу Блок 2 двигается Блок 1 от родительского элемента (body), а при включении рамок в Блок 1 - в Блоке 2 при margin-top двигается от родительского элемента Блок 1? Иными словами, без рамки внутренний блок двигает и внешний, а с рамками - двигается внутри от рамок внешнего?


#2

собственно данный урок и рассчитан на то, чтобы показать вам этот эффект, в теории к уроку всё описано, почитайте


#3

Написано, что он есть. Но почему так работает - не написано


#4

Это и есть результат выпадания внешних отступов, или маргинов. Если в родительском блоке нет границ или padding-top, то при задании вложенному в него блоку margin-top происходит выпадание: т.е. дочерний блок сливается своим верхним краем с верхним краем родителя, как бы “высовывая” свой margin-top за пределы родителя, и именно им он отталкивает родителя от body (в данном случае). Т.е. margin-top дочернего блока становится margin-top родительского. Чтобы этого не происходило, задаются границы или padding-top родительскому блоку. В этом случае “высовывание” своего margin-top дочернего блока ЗА пределы родительского блокируется (есть “замОк” - padding-top или границы родительского): в результате родительский блок остаётся там, где он был, а вот дочерний начинает двигаться уже ВНУТРИ родительского блока.


#5

Благодарю за ответ