Свойство box-sizing

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

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

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

Синтаксис

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

Значения

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

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

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

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

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

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

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

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

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

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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. Теперь размеры и первого и второго элемента станут одинаковыми:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

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