По какой причине в CSS введены правила коллапса маржи?

Question

Просто не могу понять ситуацию, когда этот умный набор правил может быть полезен. Они нарушают простоту блочной модели и обеспечивают бесконечный источник проблем, когда вы комбинируете различные части макета вместе. Так в чем же причина?

Правила для справки.

Обновление: правила вполне логичны для родственных элементов, но почему поля должны распространяться на родительские элементы вплоть до дерева? Какие проблемы это решает?

Например:

<div style="margin: 20px; background-color: red;">
    <div style="margin: 20px;">
        <p style="margin: 100px;">red</p>
    </div>
</div>
<div style="margin: 20px; background-color: blue;">blue</div>

Div верхнего уровня отстоят друг от друга на 100 пикселей.

Answer 1

Это одна из ситуаций, когда это не имеет смысла, пока вы не поймете, что альтернативы имеют меньше смысла.

Как вы, наверное, знаете, поля задают расстояние между элементами, это не "внешний отступ" " что окружает каждый элемент. Если два элемента с полем 20px расположены рядом друг с другом, расстояние между ними составляет 20px, а не 40px.

Поскольку поле - это расстояние до другого элемента, имеет смысл, чтобы расстояние было от элемента до окружающих элементов, а не до границы родительского элемента.

Если поле будет подсчитано до границы родительского элемента, размещение элементов в элементе div приведет к дополнительному интервалу между элементами, даже если сам div не имеет поле или отступ. Поля вокруг элемента должны оставаться такими же, если вы добавляете в него безстандартный div .

Answer 2

Когда это может быть полезно?

Простейший пример: список абзацев и заголовков, каждый из которых имеет margin-top и margin-bottom . Требуется поле в верхней и нижней части статьи, а также между различными элементами.

При сворачивании полей вы можете обойтись без установки специальных полей для первого или последнего элемента (НЕ является частью оригинальной спецификации CSS!) или заполнения контейнера.

Но я согласен, в целом, это бессмысленная особенность.

Answer 3

Рассмотрим текст, содержащий несколько абзацев. Вы хотите, чтобы каждый абзац был отделен от 2em, и вы хотите, чтобы первый абзац был отделен от предыдущего контента на 2em, а последний абзац - от следующего контента на 2em.

Это легко сделать с помощью следующего CSS, потому что верхнее и нижнее поля, разделяющие абзацы, будут разрушены:

p {
    margin-top: 2em
    margin-bottom: 2em;
}

Если поля не свернулись, это привело бы к тому, что поля были разделены пробелом 4em, а не 2em. Без разрушения полей единственным способом достижения желаемого эффекта было бы установить некоторые дополнительные правила для первого и последнего абзацев, что потребовало бы присвоения им класса или идентификатора (который необходимо было бы поддерживать, если текст когда-либо изменялся) или оборачивая их в ненужный в противном случае дополнительный элемент и используя: first-child и: last-child, или ... ну, вы поняли.

Я могу гарантировать, что, если бы не произошло разрушение полей, у SO было бы много повторяющихся вопросов, требующих обходных путей для достижения согласованного интервала, который обеспечивает вышеуказанное правило: -)