Для чего используется box-sizing

Что проверяют

Понимаете ли вы блочную модель. Вопрос базовый, но по нему видно, разбирался ли человек, почему вёрстка «уезжает» при добавлении отступов.

Как отвечать

box-sizing определяет, что именно означает заданная ширина.

При content-box (значение по умолчанию) ширина относится только к содержимому, а внутренние отступы и рамки прибавляются сверху. Элемент с width: 300px, padding: 20px и рамкой в 1 пиксель фактически займёт 342 пикселя, и колонка на 300 пикселей перестанет помещаться.

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

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

Что стоит добавить:

• внешние отступы (margin) в размер не входят никогда, при любом значении свойства;
• свойство наследуется не по умолчанию, поэтому в библиотеках пишут связку html { box-sizing: border-box } и * { box-sizing: inherit }, чтобы отдельный компонент мог переопределить правило для своего поддерева;
• где это особенно заметно: поля ввода и кнопки с процентной шириной, ячейки сеток, элементы с рамкой при наведении. Без border-box рамка на ховере сдвигает соседей;
• в современной вёрстке на гриде и флексе боли меньше, но правило всё равно остаётся базовой строкой сброса стилей.

Где спотыкаются

Задают ширину в процентах вместе с отступами в пикселях и ловят переполнение строки.

Считают, что border-box включает и внешние отступы.

Ставят свойство точечно на пару элементов, из-за чего в проекте сосуществуют две разные блочные модели.