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

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

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

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

Ответ 1

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

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

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

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

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