Как работает CSS-свойство margin при передаче четырёх значений?

Question

При передаче четырёх значений в margin каждое значение отвечает за свою сторону элемента. Значения применяются по часовой стрелке. Это позволяет задать разные внешние отступы для каждой стороны. Такой синтаксис сокращает код и повышает читаемость. Он используется повсеместно в вёрстке.

YeaHub · Accepted Answer

Свойство margin относится к box model и определяет внешние отступы элемента относительно соседних элементов.Определениеmargin — это внешний отступ элемента, который создаёт пространство между текущим элементом и окружающими его элементами.Логика передачи четырёх значенийКогда используется запись из четырёх значений, браузер интерпретирует их строго по порядку. Каждое число относится к конкретной стороне элемента.Порядок применения значенийЗначения применяются следующим образом:верхний отступправый отступнижний отступлевый отступПример использования.box {
  margin: 10px 20px 30px 40px;
}
В этом случае:сверху будет 10pxсправа 20pxснизу 30pxслева 40pxПрактическое применениеТакой формат используется, когда:нужно точно контролировать расстоянияlayout асимметричныйважно избежать лишних CSS-правилКраткий выводЧетыре значения в margin дают полный контроль над внешними отступами элемента и являются стандартным инструментом в CSS.