При построении сетки неопытный верстальщик может обнаружить то, что его элементы со свойством, например, padding
или border-width
могут вылазить из блока.
Зачем нам нужен border-box
При создании сетки для вебсайта мы стремимся к тому чтобы весь контент был в своих ячейках и не нарушал свои границы. По дефолту — при расчете ширины элемента берется во внимание и ширина (Например, 100% если нам нужен элемент шириной в блок), и отступы. Именно эту проблему и решает box-sizing
!
Эта конструкция годами успешно используется в Bootstrap 3/4 и других решениях, где используется сетка и решает множество проблем с переполнением элементов.
Реализация
Чтобы решить эту проблему мы используем мелкую и очень полезную конструкцию, которую добавляем в наш CSS:
*,
*::before,
*::after {
box-sizing: border-box;
}
С помощью нее элементы берут во внимание контент, padding
и border-width
при расчете ширины блока и ячейки в сетке имеют строгие границы, которые они не нарушают при грамотном подходе.
Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!