CSS Reference
margin
Controls the outer spacing around an element. The space between elements.
Last updated: October 2026
Definition: The margin property controls the outer spacing around an element. It is the space between the element's border and its neighbors. It never affects the element's own background or padding. All four sides can be set individually or via shorthand.
🎬 Live Example
The difference between margin and padding, visually.
💡 Margin is outside. Padding is inside. Both affect layout but in different ways.
Basic Syntax
.element {
margin: 20px; /* All sides */
}
.element {
margin: 10px 20px; /* Vertical | Horizontal */
}
.element {
margin: 10px 20px 30px; /* Top | Horizontal | Bottom */
}
.element {
margin: 10px 20px 30px 40px; /* Top | Right | Bottom | Left */
}The shorthand follows clockwise order starting from the top.
🎯 All margin Properties
| Property | Purpose |
|---|---|
margin | Shorthand for all four sides. |
margin-top | Top margin only. |
margin-right | Right margin only. |
margin-bottom | Bottom margin only. |
margin-left | Left margin only. |
The Shorthand Rules
One, two, three, or four values — the pattern is always the same:
/* 1 value: all sides */
margin: 10px;
/* top right bottom left = 10px */
/* 2 values: vertical | horizontal */
margin: 10px 20px;
/* top/bottom = 10px, left/right = 20px */
/* 3 values: top | horizontal | bottom */
margin: 10px 20px 30px;
/* top = 10px, left/right = 20px, bottom = 30px */
/* 4 values: top | right | bottom | left (clockwise) */
margin: 10px 20px 30px 40px;
/* top = 10px, right = 20px, bottom = 30px, left = 40px */Centering with margin: 0 auto
The classic horizontal centering trick.
.container {
width: 800px; /* Width is required */
margin: 0 auto; /* Auto distributes equal left/right */
}💡 Why width is required: Block elements default to 100% width. Without a width, margin: 0 auto has no space to distribute. Set a width (or max-width) first.
Negative Margins
Pull elements closer than their natural position. Useful for overlapping effects, but be careful.
/* Overlapping cards */
.card {
margin-top: -20px;
}
/* Pull a heading closer to the paragraph above */
h2 {
margin-top: -0.5rem;
}Warning: Negative margins can cause unexpected overflow or trigger horizontal scrollbars. Test carefully on mobile.
Margin Collapse — The Vertical Rule
When two vertical margins meet, they collapse into a single margin. The larger wins.
/* Two paragraphs stacked */
p {
margin-top: 20px;
margin-bottom: 30px;
}
/* The gap between them is 30px, not 50px.
The larger margin wins. */
/* When a child's top margin meets a parent's
top margin, they can also collapse. */When collapse happens:
- Vertical margins between adjacent block elements.
- Vertical margins between a parent and its first/last child.
- Empty block elements with no padding, border, or content.
When collapse does NOT happen:
- Horizontal margins — they always add up.
- Flex and Grid containers — margins don't collapse inside them.
- Elements with
overflow: hiddenor padding/border separating them.
Common margin Values
/* Remove all margin */
margin: 0;
/* Small spacing between elements */
margin: 0.5rem;
/* Standard gap between paragraphs */
margin: 1rem 0;
/* Large section spacing */
margin-top: 4rem;
/* Center a block element */
margin: 0 auto;
/* Push an item to the right in a flex container */
margin-left: auto;🎯 margin vs padding
| Feature | margin | padding |
|---|---|---|
| Position | Outside border | Inside border |
| Affects background | No | Yes |
| Negative allowed | Yes | No |
| Collapses vertically | Yes | No |
| Clickable area | No | Yes |
| Common use | Space between elements | Space inside buttons, cards |
⚠️ Common Mistakes
- Using margin when padding is needed. Margin is outside the border (space between elements). Padding is inside (space between content and border).
- Confusing margin collapse. Two elements with 30px and 20px margins will have a 30px gap, not 50px. Use padding or flexbox gap if you want them to add.
- Forgetting
widthbeforemargin: 0 auto. Auto margins need a defined width to distribute the space. - Using
margin: autofor vertical centering. Auto margins only center horizontally for block elements. Use Flexbox or Grid for vertical centering. - Setting margin on inline elements. Inline elements ignore vertical margin. Use
display: inline-blockorblock. - Using negative margins carelessly. They can cause overflow, trigger scrollbars, or break layouts. Test thoroughly.
- Mixing margin and
gap. In Flexbox and Grid, usegapinstead of margin for spacing between children.
♿ Accessibility Notes
- Margins don't create clickable area. If you need more touch space on a button, use padding, not margin.
- Don't remove focus outline styles via margin. If a focus ring is invisible, the issue is usually outline, not margin.
- Large margins on headings are fine for readability — they separate content visually for users with cognitive disabilities.
- Test with zoom. Margins in rem or em scale with user font-size settings; px does not. Use rem for accessibility.
- Avoid margin: auto on mobile. Centered fixed-width containers can overflow on small screens. Use max-width.
❓ Frequently Asked Questions
What is the CSS margin property?
The margin property controls the outer spacing around an element — the space between the element and its neighbors. It is outside the border and does not affect the element's own background or padding.
What is the difference between margin and padding?
Margin is outer space — between elements. Padding is inner space — between the content and the border. Margin pushes elements apart; padding pushes content in.
How do I center a block element horizontally?
Set a width on the element and use margin: 0 auto. The auto value distributes equal space on the left and right, centering the element within its parent.
What is margin collapse?
Margin collapse happens when two vertical margins meet and collapse into a single margin. The larger of the two wins. It only affects vertical margins of block elements in normal flow.
Can margins be negative?
Yes. Negative margins pull the element toward its neighbors. They are often used for overlapping effects, but should be used carefully because they can break layout in unexpected ways.