Margins

Our cards are stuck together. The space between elements is made with margin: the space outside the border, like the gap between two pictures on a wall.

margin: 20px;

Just like padding, the margin can be set on all sides at once, or on each side with margin-top, margin-right, margin-bottom and margin-left.

What's the difference between padding and margin? Padding is inside the border, and the element's background fills it. Margin is outside the border and is always transparent: you see the parent's background through it.

Browsers also give some elements a margin by default. Headings and paragraphs have a margin above and below them, which is why there are gaps between them although we haven't set any. The body element has a margin of 8 pixels on every side, and that's why the green area with the heading doesn't reach the edges of the preview.

When a value is zero, you can leave out the unit: margin: 0 is zero in any unit.