Что такое Margin

Margin — это внешний отступ элемента, определяющий расстояние между границей элемента и соседними элементами. Он не имеет фона и не влияет на размеры самого элемента, но может влиять на общую компоновку страницы.

Особенности:

• Может принимать отрицательные значения (margin: -10px)
• Автоматический margin (margin: 0 auto) выравнивает элемент по центру
• Схлопывание (collapsing) — когда вертикальные margin соседних элементов объединяются в один

Пример:

.box {
  margin: 20px; /* все стороны */
  margin: 10px 20px; /* верх/низ | право/лево */
  margin: 5px 10px 15px 20px; /* верх | право | низ | лево */
}