Кратко
Секция статьи "Кратко"При помощи свойства box
можно изменить то, как браузер будет рассчитывать размеры элемента.
По умолчанию размером элемента считается размер контентной области. Если указываешь width
, height
и padding
, то браузер посчитает размер элемента как width + padding * 2
и height + padding * 2
.
🤖 Если задать значение border
для свойства box
, то браузер изменит принцип расчёта и в width
уже будет включён padding
.
Подробнее об особенностях расчёта размеров элемента можно прочитать в статье «Блочная модель».
Пример
Секция статьи "Пример"Создадим два элемента и зададим обоим элементам идентичные стили:
<div class="element first"></div><div class="element second"></div>
<div class="element first"></div> <div class="element second"></div>
.element { display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff;}
.element { display: inline-block; width: 100px; height: 100px; padding: 25px; border: 10px solid #ffffff; }
Отличаться они будут только фоном и значением свойства box
.
.first { box-sizing: content-box; background-color: #ed6742;}.second { box-sizing: border-box; background-color: #f498ad;}
.first { box-sizing: content-box; background-color: #ed6742; } .second { box-sizing: border-box; background-color: #f498ad; }
В итоге элементы получились разного размера! Как так? Мы ведь указали одинаковые ширину, высоту и внутренние отступы, а так же рамку 🤔
Как это понять
Секция статьи "Как это понять"Причина в том, что при значении свойства box
, равном content
(значение по умолчанию) ширина элемента рассчитывается следующим образом:
Ширина контентной области (100) + внутренний отступ слева и справа (25 + 25) + ширина правой и левой рамок (10 + 10). Итого: 170 пикселей.
Аналогично с высотой.
Выходит что первый элемент получил размеры 170 х 170.
Размер второго элемента считается иначе. Из-за значения свойства box
браузер воспринимает width
и height
как конечные размеры элемента. Получается что в 100 пикселей указанной ширины уже включены и внутренние боковые отступы и боковые рамки. Размеры второго элемента будут 100 х 100.
Как это пишется
Секция статьи "Как это пишется"В качестве значения для свойства box
невозможно использовать что-то кроме ключевых слов. Значение может быть только одно.
Доступные значения:
content
— значение по умолчанию. Финальная ширина = ширина + правый внутренний отступ + левый внутренний отступ + правая рамка + левая рамка- box border
— значение- box width
иheight
являются финальными размерами элемента. Финальная ширина = ширина
Подсказки
Секция статьи "Подсказки"💡 Свойство нельзя анимировать при помощи transition
😔
💡 Свойство не наследуется.
💡 При любом значении свойства внешние отступы (margin
) в расчёт не берутся.
💡 Значение по умолчанию: content
.
На практике
Секция статьи "На практике"🛠 Из-за стандартного механизма расчёта размера элемента многие начинающие разработчики получают не те размеры элемента, которые ожидали. При этом есть два решения:
- Подгонять размер элемента под желаемый, высчитывая самостоятельно, какими должны быть внутренние отступы и рамка, чтобы в итоге получился нужный размер.
- В самом начале работы «сбросить» стандартное значение, заменив его на предсказуемое
box
.- sizing
Для «сброса» можно использовать универсальный селектор *
. Напиши в самом начале файла со стилями:
* { box-sizing: border-box;}
* { box-sizing: border-box; }
Теперь все размеры элементов будут равны тем значениям, что заданы в свойствах width
и height
. Так победим 🙌🏻