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

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>

Комментарии