Внешние отступы

Наши карточки прижаты друг к другу. Пространство между элементами создаётся внешним отступом (margin): это пространство снаружи рамки, как промежуток между двумя картинами на стене.

margin: 20px;

Как и внутренний отступ, внешний можно задать сразу со всех сторон или для каждой стороны отдельно: margin-top, margin-right, margin-bottom и margin-left.

Чем отличается внутренний отступ от внешнего? Внутренний находится внутри рамки, и фон элемента заливает его. Внешний находится снаружи рамки и всегда прозрачен: сквозь него виден фон родителя.

Браузеры также задают некоторым элементам внешний отступ по умолчанию. У заголовков и абзацев есть отступ сверху и снизу, поэтому между ними есть промежутки, хотя мы их не задавали. У элемента body со всех сторон отступ 8 пикселей, и поэтому зелёная область с заголовком не доходит до краёв окна предпросмотра.

Если значение равно нулю, единицу измерения можно не писать: margin: 0 — это ноль в любых единицах.