В чем смысл сокращения полей CSS?

Question

Блочная модель CSS2 говорит нам, что смежные вертикальные поля разрушаются .

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

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

Answer 1

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

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

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

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

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