Box-sizing

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

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

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

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

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

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

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

Ссылки по теме:
* { Box-sizing: Border-box } FTW
Цвета в CSSДва способа "прошить" элемент по краю
Наверх