Перейти к содержанию

box-sizing

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

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

Демо

Интерфейс

Синтаксис

1
2
3
4
5
6
7
8
/* 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.

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

1
box-sizing: content-box;

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

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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>

Комментарии