box-sizing

По умолчанию в модели CSS-боксов значения width и height , присваиваемые элементу, применяются только к области содержимого элемента. Если у элемента есть граница или отступ, они добавляются к width и height, чтобы определить размер отображаемого на экране бокса. Это означает, что при установке width и height, необходимо корректировать заданное значение с учетом возможной границы или отступа. Например, если у вас есть четыре блока с width: 25%;, если у какого-либо есть левый или правый отступ или граница, они по умолчанию не поместятся в одну строку в рамках ограничений родительского контейнера.

Свойство box-sizing можно использовать для корректировки этого поведения:

• content-box задает поведение по умолчанию CSS box-sizing. Если вы задаете ширину элемента в 100 пикселей, тогда область содержимого элемента будет шириной 100 пикселей, а ширина любой границы или отступа будет добавлена к окончательной ширине отображения, делая элемент шире, чем 100 пикселей.

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

  box-sizing: border-box является стилем по умолчанию, который браузеры используют для элементов <table>, <select> и <button>, а также для элементов <input> с типом radio, checkbox, reset, button, submit, color, или search.

box-sizing: border-box;
box-sizing: content-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

Свойство box-sizing задается одним ключевым словом из следующего списка.

content-box

Это начальное и значение по умолчанию, как указано в стандарте CSS. Свойства width и height включают содержимое, но не включают отступ, границу или отступ. Например, .box {width: 350px; border: 10px solid black;} отображает блок шириной 370 пикселей.

Здесь размеры элемента рассчитываются следующим образом: ширина = ширина содержимого, и высота = высота содержимого. (Границы и отступы в расчёт не берутся.)

border-box

Свойства width и height включают содержимое, отступ и границу, но не включают отступ. Обратите внимание, что отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} отображает блок шириной 350 пикселей, при этом область содержимого имеет ширину 330 пикселей. Область содержимого не может быть отрицательной и ограничена значением 0, что делает невозможным использование border-box для скрытия элемента.

Здесь размеры элемента рассчитываются как: ширина = граница + отступ + ширина содержимого, и высота = граница + отступ + высота содержимого.

box-sizing = 
  content-box  |
  border-box   

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

HTML

<div class="content-box">Content box</div>
<br />
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Результат

• Модель блоков CSS