# Свойство box-sizing

Свойство `box-sizing` позволяет менять способ расчета размеров элемента.

По умолчанию добавление `padding` расширяет элемент: если мы задали ширину `width` `100px` и `padding-left` в `20px`, то реальная ширина элемента будет `120px`.

А если мы зададим еще и `border-left` в `10px`, то реальная ширина элемента станет `130px`. То есть `padding` и `border` расширяют блок (и по ширине, и по высоте). Это поведение можно поменять с помощью `box-sizing`.

## Синтаксис

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

## Значения

Значение | Описание
--- | ---
`content-box` | И `padding`, и `border` расширяют блок.
`border-box` | Ни `padding`, ни `border` не расширяют блок.

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

## Пример . Стандартное поведение

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

`<div id="elem1">elem1</div> <div id="elem2">elem2</div>` `#elem1 { width: 300px; height: 100px; margin-bottom: 10px; background: #f1f1f1; } #elem2 { padding: 50px; width: 300px; height: 100px; background: #f1f1f1; }`

:

## Пример . Стандартное поведение

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

`<div id="elem1">elem1</div> <div id="elem2">elem2</div>` `#elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }`

:

## Пример . Стандартное поведение

Сейчас второй блок имеет и `padding`, и границу в `10px`:

`<div id="elem1">elem1</div> <div id="elem2">elem2</div>` `#elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { padding: 50px; border: 20px solid black; width: 300px; height: 100px; background: #f1f1f1; }`

:

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

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

`<div id="elem1">elem1</div> <div id="elem2">elem2</div>` `#elem1 { width: 300px; height: 100px; background: #f1f1f1; } #elem2 { box-sizing: border-box; padding: 50px; border: 10px solid black; width: 300px; height: 100px; background: #f1f1f1; }`

:

## Смотрите также

- свойство `outline`,
  которое делает границу, не расширяющую элемент

←→
↑