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

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

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

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

Например:

<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 пикселей.

Источник

3 ответа

Решение

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

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

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

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

Источник

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

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

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

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

Источник

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

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

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

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

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

Источник
Другие вопросы по тегам