skip to main content

box-sizing

css

Кратко 🔗

При помощи свойства box-sizing можно изменить то, как браузер будет рассчитывать размеры элемента.

По умолчанию размером элемента считается размер контентной области. Если указываешь width, height и padding, то браузер посчитает размер элемента как width + padding * 2 и height + padding * 2.

🤖 Если задать значение border-box для свойства box-sizing, то браузер изменит принцип расчёта и в width уже будет включен padding.

Ситуация абсолютно аналогична для border.

Пример 🔗

Создадим два элемента и зададим обоим элементам идентичные стили:

HTML

<div class="element first"></div>
<div class="element second"></div>

CSS

.element {
display: inline-block;
width: 100px;
height: 100px;
padding: 25px;
border: 10px solid #ffffff;
}

Отличаться они будут только фоном и значением свойства box-sizing

CSS

.first {
box-sizing: content-box;
background-color: #ed6742;
}

.second {
box-sizing: border-box;
background-color: #f498ad;
}

В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку 🤔

Как это понять 🔗

Причина в том, что при значении свойства box-sizing, равном content-box (значение по умолчанию) ширина элемента рассчитывается следующим образом:

Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.

Аналогично с высотой.

Выходит что первый элемент получил размер: 170 х 170.

Размер второго элемента считается иначе. Из-за значения свойства box-sizing браузер воспринимает width / height как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут: 100 х 100.

Как это пишется 🔗

В качестве значения для свойства box-sizing невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.

Доступные значения:

  • content-box — значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка
  • border-box — значение width / height являются финальными размерами элемента. Финальная ширина = ширина

Подсказки 🔗

💡 Свойство не анимируется при помощи transition 😔

💡 Свойство не наследуется.

💡 При любом значении свойства внешние отступы (margin) в расчёт не берутся.

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

В работе 🔗

Алёна,

🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:

  1. Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.
  2. В самом начале работы «сбросить» стандартное значение, заменив его на предсказуемое box-sizing.

Для «сброса» можно использовать универсальный селектор *. Напиши в самом начале файла со стилями:

* {
box-sizing: border-box;
}

Теперь все размеры элементов будут равны тем значениям, что заданы в свойствах width / height. Так победим 🙌🏻

Автор: Алёна,