Свойство box-sizing позволяет менять способ расчета размеров элемента. По умолчанию добавление padding расширяет элемент: если мы задали ширину width 100px и padding-left в 20px, то реальная ширина элемента будет 120px. А если мы зададим еще и border-left в 10px, то реальная ширина элемента станет 130px. То есть padding и border расширяют блок (и по ширине, и по высоте). Это поведение можно поменять с помощью box-sizing.

См. также outline - границу, которая не расширяет элемент.

Синтаксис

селектор {
	box-sizing: content-box | border-box | padding-box | inherit;
}

Значения

Значение Описание
content-box Стандартное (иногда очень неудобное) поведение - padding и border расширяют блок.
padding-box Свойство padding не расширяет блок, а border - расширяет. На 2015 год поддерживает только Mozilla!
border-box Ни padding, ни border не расширяют блок.
inherit Наследует значение родителя.

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

Примеры

Пример . Стандартное поведение (значение content-box)

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока padding задан, а у первого - нет. Посмотрите, как отличаются их размеры:

width: 300px; height: 100px; padding: 0px.
width: 300px; height: 100px; padding: 50px.

Пример . Стандартное поведение (значение content-box)

Сейчас оба блока имеют одинаковую высоту и ширину, однако у второго блока задана граница в 20px, а у первого - нет. Посмотрите, как отличаются их размеры:

width: 300px; height: 100px;
width: 300px; height: 100px; border: 20px solid black;

Пример . Стандартное поведение (значение content-box)

Добавим и padding, и границу:

width: 300px; height: 100px; padding: 0px;
width: 300px; height: 100px; border: 20px solid black; padding: 30px;

Пример . Значение padding-box

Добавим значение padding-box для свойства box-sizing. Теперь размеры второго элемента будет увеличивать только граница, но не padding:

width: 300px; height: 150px; padding: 0px;
box-sizing: padding-box; width: 300px; height: 150px; border: 20px solid black; padding: 50px;

Пример . Значение border-box

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

box-sizing: border-box; width: 300px; height: 200px; padding: 0px;
box-sizing: border-box; width: 300px; height: 200px; border: 20px solid black; padding: 50px;