В каком порядке интерпретируются значения margin при записи из четырёх чисел?

Question

Значения margin интерпретируются по часовой стрелке. Сначала задаётся верхний отступ, затем правый, потом нижний и левый. Этот порядок является стандартом CSS. Он используется и в других свойствах, например padding. Знание порядка помогает избежать ошибок в layout.

YeaHub · Accepted Answer

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