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

Свойство margin относится к box model и определяет внешние отступы элемента относительно соседних элементов.

Определение

margin — это внешний отступ элемента, который создаёт пространство между текущим элементом и окружающими его элементами.

Логика передачи четырёх значений

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

Порядок применения значений

Значения применяются следующим образом:

1. верхний отступ

2. правый отступ

3. нижний отступ

4. левый отступ

Пример использования

.box {
  margin: 10px 20px 30px 40px;
}

В этом случае:

• сверху будет 10px

• справа 20px

• снизу 30px

• слева 40px

Практическое применение

Такой формат используется, когда:

• нужно точно контролировать расстояния

• layout асимметричный

• важно избежать лишних CSS-правил

Краткий вывод

Четыре значения в margin дают полный контроль над внешними отступами элемента и являются стандартным инструментом в CSS.