Справочник HTML & CSS

box-sizing

Входят ли в `width` и `height` внутренние отступы и рамка.

Синтаксис

box-sizing: border-box;

Значения

Параметр	Тип	Описание
content-box	keyword	Только содержимое; отступы и рамка добавляются сверху (по умолчанию).
border-box	keyword	Содержимое, отступы и рамка вместе.

Примеры

Одна и та же ширина в разных моделях:

<style>
  div { width: 200px; padding: 20px; border: 5px solid steelblue; margin-bottom: 8px; }
</style>
 
<div style="box-sizing: content-box;">content-box: 250px in total</div>
<div style="box-sizing: border-box;">border-box: exactly 200px</div>

Примечания

Почти каждый проект начинается со сброса, который делает размеры предсказуемыми: *, *::before, *::after { box-sizing: border-box; }.

См. также

width — Ширина элемента.
padding — Внутренний отступ между содержимым и рамкой элемента.
border — Рамка вокруг элемента: толщина, стиль и цвет в одном свойстве.

Вопросы и ответы по теме

В учебнике

Блочная модель — Из чего состоит элемент в CSS — содержимое, padding, border и margin, размеры, центрирование и box-sizing.

Спасибо, что читаете!