При построении сетки неопытный верстальщик может обнаружить то, что его элементы со свойством, например, padding или border-width могут вылазить из блока.

Зачем нам нужен border-box

При создании сетки для вебсайта мы стремимся к тому чтобы весь контент был в своих ячейках и не нарушал свои границы. По дефолту — при расчете ширины элемента берется во внимание и ширина (Например, 100% если нам нужен элемент шириной в блок), и отступы. Именно эту проблему и решает box-sizing!

Эта конструкция годами успешно используется в Bootstrap 3/4 и других решениях, где используется сетка и решает множество проблем с переполнением элементов.

Реализация

Чтобы решить эту проблему мы используем мелкую и очень полезную конструкцию, которую добавляем в наш CSS:

*,
*::before,
*::after {
  box-sizing: border-box;
}

С помощью нее элементы берут во внимание контент, padding и border-width при расчете ширины блока и ячейки в сетке имеют строгие границы, которые они не нарушают при грамотном подходе.

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!