Вопрос проверяет знание стандартного порядка интерпретации CSS-сокращений и внимательность к деталям синтаксиса.
Значения margin интерпретируются по часовой стрелке. Сначала задаётся верхний отступ, затем правый, потом нижний и левый. Этот порядок является стандартом CSS. Он используется и в других свойствах, например padding. Знание порядка помогает избежать ошибок в layout.
Сокращённая запись margin подчиняется чётко определённому правилу, которое важно запомнить.
При использовании четырёх значений порядок всегда одинаков и не зависит от контекста:
top
right
bottom
left
Часто используется правило:
TRBL — top, right, bottom, left
или
движение по часовой стрелке, начиная сверху
.container {
margin: 8px 16px 24px 32px;
}
Это означает:
верх 8px
право 16px
низ 24px
лево 32px
Непонимание порядка:
приводит к визуальным багам
усложняет отладку layout
делает код менее читаемым
Тот же порядок используется в:
padding
border-width
border-radius (с нюансами)
Порядок интерпретации margin из четырёх значений фиксирован и должен использоваться осознанно при вёрстке.