Что такое блочная модель CSS, какие свойства в неё входят и как изменить её поведение?

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

Понимаете ли вы, из чего складывается итоговый размер элемента и почему блок с width: 100% вдруг вылезает за родителя. Следом обычно спрашивают про box-sizing и схлопывание отступов.

Как отвечать

Каждый элемент браузер рисует как вложенные прямоугольники, изнутри наружу:

• content: область содержимого, её задают width и height, а также min-* и max-*;
• padding: внутренний отступ, под ним виден фон элемента. Процентный padding считается от ширины родителя, даже сверху и снизу;
• border: рамка, тоже часть размера;
• margin: внешний отступ, прозрачный, бывает отрицательным и auto. margin: 0 auto центрирует блок с заданной шириной.

Поведение меняют так:

• box-sizing: по умолчанию content-box, и width: 200px с padding: 20px и рамкой в 1px дают 242px. С border-box те же 200px включают padding и рамку, сжимается содержимое. Обычно его ставят глобально: *, *::before, *::after { box-sizing: border-box; };
• display: у строчных элементов width и height не работают, а вертикальные padding и margin не раздвигают строки. inline-block возвращает блочные размеры внутри текста, display: contents убирает собственный бокс элемента;
• логические свойства: margin-inline и padding-block учитывают направление письма и выручают в RTL-вёрстке.

Посмотреть модель конкретного элемента проще всего во вкладке Computed в DevTools.

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

Не знают про схлопывание вертикальных margin. Соседние блоки с margin: 20px стоят в 20px друг от друга, а не в 40px, и отступ ребёнка может «выпасть» из родителя. Внутри flex и grid схлопывания нет, у родителя его отменяют display: flow-root, padding или рамка.

Считают outline и box-shadow частью модели. Они рисуются поверх и места не занимают, поэтому ими удобно подсвечивать фокус без сдвига вёрстки.

Думают, что border-box меняет сами отступы. Он меняет только то, к чему относятся width и height, а padding и margin остаются прежними.