Какие свойства CSS модифицируют ширину, высоту и отступы

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

Понимаете ли вы блочную модель, а не просто помните названия свойств. Интервьюер ждёт, что вы объясните, из чего складывается итоговый размер элемента. Следом обычно дают задачку: «Почему блок с width: 100% и padding вылезает за родителя?» или спрашивают про схлопывание отступов.

Как отвечать

Начните с блочной модели: контент, padding, border, margin. Затем сгруппируйте свойства:

• размеры: width, height, пределы min-* и max-*, значения auto, min-content, max-content, fit-content, а также aspect-ratio;
• отступы: внутренние padding и внешние margin, по сторонам или сокращённой записью. Проценты у них считаются от ширины контейнера, даже для верхнего и нижнего;
• box-sizing: по умолчанию content-box, и width задаёт только контент, а padding и border прибавляются сверху. С border-box они входят в заданную ширину, поэтому его обычно ставят глобально;
• логические свойства: inline-size, block-size, margin-inline, padding-block. Они следуют направлению письма и выручают в RTL-интерфейсах;
• flex и grid: flex-basis, flex-grow, flex-shrink, треки fr, а расстояния между элементами проще задавать через gap, чем через margin.

Отдельно скажите о поведении по умолчанию. Блочный элемент растягивается на ширину контейнера, высота определяется содержимым. Процентная height работает, только если высота родителя определена. У строчных элементов вроде span свойства width и height не действуют, а вертикальные margin не раздвигают строки, поэтому их переводят в inline-block. На мобильных 100vh равен высоте экрана со скрытыми панелями браузера, и низ уезжает под них, выручают dvh и svh.

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

Забывают про схлопывание: вертикальные margin соседних блоков в обычном потоке не складываются, берётся больший. Во flex и grid схлопывания нет.

Не знают про min-width: auto у flex-элементов. Из-за него длинное содержимое не даёт элементу сжаться, помогает min-width: 0.

Путают outline и border: outline на размеры не влияет, а border при content-box увеличивает элемент.