Box-sizing

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

Спецификация: w3.org/TR/css3-ui/#box-sizing

Возможные значения:

content-box — отступы и рамки рисуются снаружи блока блока и увеличивают его размеры (значение по умолчанию).

padding-box — рамки рисуются снаружи блока блока и увеличивают его размеры, padding отрисовывается внутри элемента и не влияет на размеры. Работает только в Firefox.

border-box — элемент сохраняет заданные размеры, отступы и рамки отрисовываются внутрь элемента.

Свойство довольно широко поддерживается браузерами, в некоторых случаях требуются префиксы. Подробнее можно посмотреть на caniuse.com/#feat=css3-boxsizing

Статьи по теме: paulirish.com/2012/box-sizing-border-box-ftw/

Если вы нашли ошибку или неточность, вы можете отредактировать статью с помощью prose.io, а также можно написать мне в комментариях или в Twitter.
Система комментирования от Disqus