box-sizing¶

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

Согласно спецификации CSS ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). Аналогично обстоит и с высотой блока. Свойство box-sizing позволяет изменить этот алгоритм, чтобы свойства width и height задавали размеры не контента, а размеры блока.

Синтаксис¶

/* Keyword values */
box-sizing: content-box;
box-sizing: border-box;

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

Значения¶

content-box -- Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.
border-box -- Свойства width и height включают в себя значения полей (padding) и границ (border), но не отступов (margin).

Примечания¶

Firefox до версии 29 поддерживает свойство -moz-box-sizing.

Safari до версии 5.0, Chrome до версии 10.0, Android до версии 4.0 поддерживают свойство -webkit-box-sizing.

Значение по-умолчанию:

box-sizing: content-box;

Применяется к: Ко всем элементам

Спецификации¶

CSS Basic User Interface Module Level 3

Поддержка браузерами¶

Can I Use css3-boxsizing? Data on support for the css3-boxsizing feature across the major browsers from caniuse.com.

Описание и примеры¶

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>box-sizing</title>
    <style>
      .box1 {
        background: #f0f0f0; /* Цвет фона */
        width: 300px; /* Ширина блока */
        padding: 10px; /* Поля */
        border: 2px solid #000; /* Параметры рамки */
      }
      .box2 {
        background: #fc0; /* Цвет фона */
        width: 300px; /* Ширина блока */
        padding: 10px; /* Поля */
        margin-top: 10px; /* Отступ сверху */
        border: 2px solid #000; /* Параметры рамки */
        box-sizing: border-box; /* Ширина блока с полями */
      }
    </style>
  </head>
  <body>
    <div class="box1">Ширина с учетом значения свойства width, полей и границ.</div>
    <div class="box2">Ширина равна значению свойства width.</div>
  </body>
</html>