Свойство box-sizing

При изучении вёрстки возникают некоторые сложности при определении размеров элементов. Мы узнаем о необычном свойстве и решим, что же нам необходимо, чтобы вёрстка была такая же, как на макете.

 

Размеры элементов определяет свойство стилей box-sizing. Давайте рассмотрим это свойство с азов. У него есть 3 значения: content-box, border-box и inherit. Начальное значение у него content-box. Также свойство не наследуется.

Существует ещё и 4 значение – padding-box, это значение повторяет border-box, но оно устарело и не поддерживается браузерами.

 

1) Значение inherit наследует значение родителя. Это полезно, когда, например, мы для body задаём определённый box-sizing и, ко всем элементам div задаём box-sizing: inherit. Это значит, что на все элементы div будет действовать то значение, которое мы задали для body.

 

2) Значение content-box, как можно догадаться задаёт расчёт размеров элемента по контентной части, не включая внутренние отступы (padding) и границы (border).

 

3) Значение border-box заставляет браузер высчитывать размеры элемента вместе с внутренними отступами (padding) и границами (border).

 

По сути это всё, что нужно знать о этом свойстве. Но вопрос о том, как же его применять остаётся открытым.
Сравним поближе значения content-box и border-box. 

 

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

 

Есть 2 способа не сталкиваться с проблемами размеров элементов:

1) Для всех элементов на странице задать box-sizing: border-box. Это делается через универсальный селектор *.

2) Для body задать box-sizing: border-box и для всех остальных элементов задать box-sizing: inherit.

 

Я подготовил песочницу, где вы можете сделать шаг влево и закрепить полученные знания. Смело меняйте значения у элементов и смотрите, что из этого получится.

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!