CSS Margin
CSS margin creates space outside an element's border. Learn the margin shorthand, individual sides, 1/2/3/4 value syntax, auto centering, negative margins, and how margin differs from padding.
- What is CSS Margin?
- Margin Syntax
- Individual Sides
- Shorthand 1–4 values
- margin: auto
- Negative Margin
- Margin vs Padding
- Common Mistakes
- Try It
- FAQ
What is CSS Margin?
CSS margin creates space outside an element's border — between the element and its neighbours. It's invisible space that pushes other elements away, giving your layout breathing room.
Think of every HTML element as a picture frame. The margin is the wall space between frames. It's always transparent — it never takes on the element's background colour.
1. Margin Syntax
Basic: margin: value;
One value applies the same margin to all four sides at once — top, right, bottom, and left. The value can be in px, rem, em, %, or auto.
/* 20px space on all four sides */ p { margin: 20px; } /* 30px space on all four sides */ div { margin: 30px; } /* No margin — CSS reset */ * { margin: 0; }
2. Individual Sides
One property per side
Use the four individual properties when you need different spacing on different sides. These are the most precise way to control spacing.
margin-top: 20px; /* space above */ margin-bottom: 20px; /* space below */ margin-left: 30px; /* space on left */ margin-right: 30px; /* space on right */ /* Real example — heading with more bottom spacing */ h1 { margin-top: 0; margin-bottom: 1.5rem; margin-left: 0; margin-right: 0; }
3. Shorthand (1–4 values)
Instead of four separate properties, combine them in one line. The number of values changes what they control:
/* 4 values: top right bottom left (clockwise) */ p { margin: 10px 20px 30px 40px; } /* 3 values: top | right&left | bottom */ p { margin: 10px 20px 30px; } /* 2 values: top&bottom | left&right */ p { margin: 20px 40px; } /* 1 value: all sides equal */ p { margin: 20px; }
4. margin: auto — Centering Elements
margin: 0 auto — Horizontal centering
Setting margin: auto on left and right tells the browser to split the remaining horizontal space equally on both sides — centering the element. The element must have a defined width for this to work.
/* Centre a fixed-width div */ div { width: 300px; margin: auto; border: 2px solid black; } /* Most common real-world pattern */ .container { max-width: 1200px; margin: 0 auto; /* 0 top/bottom, auto left/right */ padding: 0 1rem; }
5. Negative Margin
Negative values — pull elements closer
Margins can be negative, which pulls an element in the opposite direction — overlapping its neighbour or pulling it outside its container. Useful for precise layout adjustments, but use sparingly.
/* Pull element upwards by 20px */ div { margin-top: -20px; } /* Overlap a card over the one above it */ .card { margin-top: -30px; } /* Most common use: remove default browser margin */ body { margin: 0; } /* removes default 8px */
6. Margin vs Padding
Both create space, but in completely different places. This is the most important distinction in CSS spacing:
| Property | Where is the space? | Background colour? | Use case |
|---|---|---|---|
| margin | Outside the border — between elements | Always transparent | Space between cards, sections, paragraphs |
| padding | Inside the border — between border and content | Fills with background colour | Inner spacing in buttons, cards, boxes |
/* margin = space OUTSIDE the border (always transparent) */ .card { background: lightyellow; border: 2px solid black; margin: 30px; /* 30px transparent gap outside */ } /* padding = space INSIDE the border (gets background) */ .card { background: lightyellow; border: 2px solid black; padding: 20px; /* 20px yellow gap inside */ }
Common Mistakes
margin: 0 auto only works on block elements with a specified width. If you don't set width or max-width, the element already fills its container — there's no remaining space to split, so centering has no effect.
If your element's background colour extends into the spacing — that's padding. If the spacing is transparent (you see the parent background) — that's margin. When you need coloured inner spacing, use padding. When you need transparent outer gap, use margin.
Browsers add default margins to headings, paragraphs, and other elements. When your layout has unexpected gaps at the top or between elements, check if browser defaults are the cause. Fix with * { margin: 0 } at the top of your stylesheet.
Questions About CSS Margin
The questions beginners most often ask about margin:
Margin creates space outside the element's border — it's the gap between one element and its neighbours. It's always transparent. Padding creates space inside the border — between the border and the content. Padding takes on the element's background colour. Quick visual test: if you see background colour in the spacing, it's padding. If the spacing is transparent (showing the parent's background), it's margin.
Two common reasons. First, the element needs a defined width — if it fills the full container already, there's no remaining space to split equally. Set width or max-width first. Second, margin: auto only works for horizontal centering on block elements — it doesn't center elements vertically. For vertical centering, use flexbox (align-items: center) instead.
Browsers add default margins to many elements — body has an 8px default margin in most browsers, headings have top and bottom margins, paragraphs have bottom margins. These defaults explain most "mystery gaps". Fix them with a CSS reset at the top of your stylesheet: * { margin: 0; padding: 0; }. You can then add your own spacing intentionally.
When two vertical margins (top/bottom) of adjacent elements meet, they collapse into one — the larger value "wins" instead of adding together. For example, if a heading has margin-bottom: 30px and the paragraph below has margin-top: 20px, the gap between them is 30px, not 50px. Margin collapse only happens vertically, not horizontally, and not inside flexbox or grid containers.
For spacing that should stay fixed regardless of font size, use px. For spacing that should scale with the base font size (accessible and user-friendly), use rem — 1rem equals the root font size (usually 16px). Avoid em for margins unless you specifically want spacing relative to the element's own font size, which can create confusing scaling. Professional CSS today mostly uses rem for spacing.