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

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

19 голосов
/ 17 сентября 2009

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

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

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

Например: 

<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 верхнего уровня отстоят друг от друга на 100px.

Ответы [ 3 ]

17 голосов
/ 17 сентября 2009

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

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

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

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

3 голосов
/ 17 сентября 2009

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

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

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

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

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

3 голосов
/ 17 сентября 2009

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

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

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

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

...