Как будет выглядеть вложенный div с бордерами разного цвета и размеров

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

Знаете ли вы блочную модель: как складываются содержимое, padding, border и margin и что меняет box-sizing. Задачу часто дают в виде «нарисуйте, что получится», а следом спрашивают, как выглядят углы, где встречаются рамки разного цвета.

Как отвечать

Проговорите поведение по шагам:

• ширина: внутренний div без заданной ширины растягивается на область содержимого родителя, то есть внутри его padding. Рамки вложенных блоков не схлопываются и не накладываются, они стоят одна внутри другой;
• box-sizing: по умолчанию content-box, и width: 200px с padding: 20px и border: 5px solid дают на экране 250px. При border-box итог 200px, а сжимается содержимое. Вложенный блок с width: 100% и рамкой в content-box вылезает за родителя на ширину своих рамок;
• высота: пустые вложенные блоки без padding имеют нулевую высоту содержимого, и на экране остаются только рамки, прижатые друг к другу: внешняя, сразу под ней внутренняя, затем их нижние стороны;
• углы: где встречаются стороны разного цвета, стык идёт по диагонали, а при разной толщине наклон диагонали зависит от соотношения толщин. Элемент с width: 0; height: 0 и прозрачными боковыми рамками превращается в треугольник, это классический приём;
• схлопывание margin: рамка у родителя не даёт вертикальному margin ребёнка выйти наружу. Уберите рамку и padding, и отступ ребёнка окажется снаружи родителя.

Если нужна рамка, которая не влияет на размеры, упомяните outline или box-shadow с inset.

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

Пишут border: 5px red и не видят рамку. Стиль по умолчанию none, поэтому в шорткате обязателен solid или другой стиль. А если не указать цвет, возьмётся currentColor, цвет текста.

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

Ждут, что соседние рамки сольются, как margin. Схлопываются только вертикальные внешние отступы, а рамки объединяет лишь border-collapse у ячеек таблицы.