Исполняемые доки CSS: Блочная модель CSS

Q: Что делает box-sizing: border-box?

Включает padding и border в width и height. Блок с width: 200px, padding: 20px и рамкой 5px тогда ровно 200px в ширину, а область содержимого сжимается до 150px. Значение по умолчанию, content-box, добавляет padding и border сверху, и получается 250px.

Q: Как считается полная ширина элемента?

С content-box по умолчанию: width + левый и правый padding + левый и правый border. С border-box: только width. Margin в обоих случаях снаружи блока, поэтому он добавляется к месту, которое занимает элемент, а не к его собственной ширине.

Q: Стоит ли задавать box-sizing: border-box всем элементам?

Большинство проектов так и делают, правилом , ::before, *::after { box-sizing: border-box; } в начале таблицы стилей. С ним ширины в процентах и padding складываются так, как люди ожидают, а фреймворки вроде Bootstrap и Tailwind содержат тот же сброс.

Четыре слоя каждого блока

Каждый элемент страницы рисуется прямоугольником из четырех слоев, изнутри наружу:

Content: текст, изображение или дочерние элементы, размер задают width и height.
Padding: внутренний отступ между содержимым и рамкой. На нем виден фон элемента.
Border: линия вокруг padding.
Margin: внешний отступ за рамкой, который отталкивает другие блоки. Всегда прозрачный.

В примере у каждого слоя свой цвет: синее содержимое, зеленый padding, темная рамка и янтарная область вокруг блока, это margin (ее рисует обертка, ведь сам margin прозрачен).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

Строку под блоком измеряет браузер: 160 + 20 + 20 + 10 + 10 = 220px. Margin добавляет еще по 24px с каждой стороны, но он снаружи блока, поэтому в эти 220 не входит.

Расчет ширины: content-box и border-box

По умолчанию (box-sizing: content-box) width задает только содержимое. Padding и border добавляются сверху, и блок получается шире написанного числа. С box-sizing: border-box width это весь блок, а содержимое сжимается, чтобы вместить padding и border.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (по умолчанию)	`border-box`
`width` означает	Содержимое	Содержимое + padding + border
`width: 200px; padding: 20px; border: 5px`	250px в ширину	200px в ширину
Область содержимого в этом случае	200px	150px
Margin	Снаружи, не учитывается	Снаружи, не учитывается

Сброс border-box

Раз с border-box размеры складываются предсказуемо, почти каждая современная таблица стилей начинается с этого правила:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Сильнее всего это заметно с процентами. Две колонки width: 50% с padding не помещаются в одну строку при content-box, потому что каждая равна 50% плюс ее padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(HTML-комментарии убирают пробел между колонками inline-block, который иначе добавил бы несколько пикселей.)

Блочная модель в DevTools

Каждый браузер рисует блочную модель за вас. Кликните по элементу правой кнопкой, выберите Inspect (Просмотреть код) и откройте вкладку Computed (Layout в Firefox): схема показывает размер содержимого в центре, а вокруг значения padding, border и margin. Наведение на элемент в панели Elements тоже подкрашивает страницу: содержимое синим, padding зеленым, margin оранжевым.

Строчные блоки подчиняются другим правилам

Описанная выше блочная модель относится к блочным элементам вроде <div> и <p>. Строчные элементы вроде <span>, <a> и <strong> переносятся внутри строки текста и по-другому обращаются с вертикальным пространством:

Свойство	У строчного элемента
`width`, `height`	Игнорируются
Горизонтальные padding, border, margin	Применяются и раздвигают соседей в стороны
Вертикальные padding и border	Рисуются, но не отодвигают строки сверху и снизу
Вертикальный margin	Игнорируется

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block дает элементу внутри строки полную блочную модель: его ширина, высота, padding и margin занимают место. Каждый слой подробно разобран в разделах padding в CSS и margin в CSS.

Частые ошибки

Добавили padding блоку с фиксированной шириной, и он вырос. При content-box padding и border прибавляются к width. Используйте border-box.
Ожидание, что margin примет цвет фона. Margin всегда прозрачен; для цветного пространства используйте padding.
height или вертикальный margin у строчного элемента. Ничего не происходит; используйте display: inline-block или block.
Забытые рамки в расчете. Рамка 1px у элемента с width: 100% делает его на 2px шире при content-box, и может появиться горизонтальная прокрутка.
Путаница margin и padding. Коротко: padding внутри рамки, margin снаружи. На странице margin и padding: разница они сравниваются рядом.

Часто задаваемые вопросы

Что такое блочная модель CSS?

Правило, по которому каждый элемент отображается прямоугольным блоком из четырех слоев: содержимое, padding вокруг него, border вокруг padding и margin снаружи от border. Ширина, высота и отступы в CSS задаются именно на этих слоях.

Что делает box-sizing: border-box?

Включает padding и border в width и height. Блок с width: 200px, padding: 20px и рамкой 5px тогда ровно 200px в ширину, а область содержимого сжимается до 150px. Значение по умолчанию, content-box, добавляет padding и border сверху, и получается 250px.

Как считается полная ширина элемента?

С content-box по умолчанию: width + левый и правый padding + левый и правый border. С border-box: только width. Margin в обоих случаях снаружи блока, поэтому он добавляется к месту, которое занимает элемент, а не к его собственной ширине.

Входит ли margin в блочную модель?

Да, это самый внешний слой, но он всегда прозрачный и никогда не входит в собственную ширину элемента и его фон. Он только отталкивает соседние блоки.

Стоит ли задавать box-sizing: border-box всем элементам?

Большинство проектов так и делают, правилом *, *::before, *::after { box-sizing: border-box; } в начале таблицы стилей. С ним ширины в процентах и padding складываются так, как люди ожидают, а фреймворки вроде Bootstrap и Tailwind содержат тот же сброс.

Связанные концепции