Свойство CSS `box-sizing`

Свойство box-sizing CSS задаёт способ расчёта общей ширины и высоты элемента.

Попробуйте

box-sizing: content-box;
width: 100%;

box-sizing: content-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

box-sizing: border-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

<section id="default-example">
  <div id="example-element-parent">
    <p>Parent container</p>
    <div class="transition-all" id="example-element">
      <p>Child container</p>
    </div>
  </div>
</section>

#example-element-parent {
  width: 220px;
  height: 200px;
  border: solid 10px #ffc129;
  margin: 0.8em;
}

#example-element {
  height: 60px;
  margin: 2em auto;
  background-color: rgb(81 81 81 / 0.6);
}

#example-element > p {
  margin: 0;
}

Синтаксис

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;

Значения

Это свойство задаётся одним из следующих ключевых значений:

content-box

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

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

border-box

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

В этом случае размеры элемента рассчитываются следующим образом: width = граница + внутренние отступы + ширина содержимого и height = граница + внутренние отступы + высота содержимого.

Описание

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

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

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

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

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

Формальное определение

Формальный синтаксис

box-sizing = 
  content-box |
  border-box

Примеры

Размеры блоков со значениями 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