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

Question

[sorry_i_noob]

Есть такой код:
https://jsfiddle.net/a2jdcugw/
Почему от sub-block margin-top переносится на block, из-за чего отступы между двумя block равны не 10px (столько задано), а 30px. А вот от sub-sub-block margin-top на sub-block не переносится? Как задано 30px, так и есть 30px. А ведь у sub-sub-block 40px.

Comments

[RAX7]

<div class="sub-block">2
двойку убери и схлопывание заработает

[Rustam Bainazarov]

Почитайте ответ Рома Зварич к аналогичному предыдущему вопросу.

Answer 1

[Рома Зварич]

Почему от sub-block margin-top переносится на block, из-за чего отступы между двумя block равны не 10px (столько задано), а 30px.

Я же Вам в этом вопросе отвечал.

Происходит выпадение дочернего margin за пределы родительского.
И снова даю ссылку на статью, которую уже давал. Ведь там это тоже объясняется.

Но раз Вам лень читать, кратко перескажу.
Это полезно в ситуациях, когда, например, тег параграфа <p> находится внутри родительского <article>. Вряд ли в обычной ситуации разработчику нужно, чтобы между родительским элементом и первым или последним параграфом был большой отступ, состоящий из стандартного отступа элемента <p>. Поэтому во времена, когда интернет был в основном текстовым, придумали подобное правило выпадения margin за пределы родителя.

А вот от sub-sub-block margin-top на sub-block не переносится?

Не переносится, потому что: у первого элемента верхний margin может выпадать вверх, у последнего элемента нижний margin может выпадать вниз (ну или оба, если элемент является единственным дочерним). А в Вашем случае sub-sub-block находится после двойки (соответственно, не является первым дочерним элементом) родительского тега sub-block. Но Вы указываете верхний margin.