Зачем используют box-sizing: border box; и назначение его для ВСЕГО?

Question

[coi1751]

Насколько я понял, если указать border box, то за ширину берется не содержимое, а весь блок. То есть с паддингами, маржинами и т.д. Правильно ли я понимаю? И зачем делают такую вещь:

* {
box-sizing: border-box;
}

То есть делают ее для всех элементов, насколько это правильно, либо наоборот? Стоит ли делать также? И главный вопрос, зачем?

Comments

[Сергей delphinpro]

border-box - более адекватная блочная модель. Странно, что она не включена по умолчанию.

Answer 1

[iBird Rose]

насколько это правильно

в общем понимании стилей так задавать стили - не правильно, но именно в случае с box-sizing - это скорее необходимость.

Стоит ли делать также?

Тут вопрос скорее удобства нежели правильно или не правильно. Если тебе удобно верстать с box-sizing: content-box; - то верстай так. если нет, то переходи на border-box;
Только учти, что львиная доля CSS фреймворков работает на border-box.

И главный вопрос, зачем?

Как и ответ выше - это удобно. Когда с border-box ты создаешь блок с шириной 100px - что бы ты с этим блоком не делал - он будет 100px; и тебе не нужно учитывать паддинги и прибавлять их к общему размеру блока и держать это в голове.

Answer 2

[Negwereth]

Предсказуемый размер элемента.

Answer 3

[cssfish]

не "с паддингами и маржинами", а "ширина+ бордер+паддинг"
используют в фреймворках для всего подряд, чтоб юзеры, не знающие css, мозг не парили лишний раз.
стоит ли делать - дело ваше.