w3c img В чем смысл крахмальных полей CSS?



html tooltip (1)

Модель коробки CSS2 говорит нам о том, что прилегающие вертикальные поля сворачиваются .

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

Какова цель этой функции?


Answer #1

Общий смысл «margin» заключается не в том, чтобы передать «переместить это на 10px», а скорее «должно быть 10px пустого пространства рядом с этим элементом».

Я всегда считал, что это проще всего концептуализировать с помощью абзацев.

Если вы просто дали абзацы margin-top: 10px и не имели полей на каких-либо других элементах, серия абзацев была бы отделена красиво. Но, конечно, вы столкнулись с трудностями при размещении другого элемента под абзацем. Эти два касались.

Если поля не рухнули, вы смутитесь добавить margin-bottom: 10px к вашему предыдущему коду, потому что тогда любая пара параграфов будет разнесена на 20 пикселей отдельно, а параграфы будут отделены от других элементов только 10px.

Поэтому вертикальные поля рушится. Добавляя верхние и нижние поля в 10 пикселей, вы говорите: «Меня не волнует, какие маржи управляют любыми другими элементами. Я требую по крайней мере 10px отступов выше и ниже каждого из моих абзацев».