margin
The margin CSS shorthand property sets the margin area on all four sides of an element.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
| Other | ||||||
| The margin-bottom CSS property sets the margin area on the bottom of an element. A positive value places it farther from its neighbors, while a negative value places it closer. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The margin-left CSS property sets the margin area on the left side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The margin-right CSS property sets the margin area on the right side of an element. A positive value places it farther from its neighbors, while a negative value places it closer. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
| Other | ||||||
| The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS property | ||||||
auto | 1 | 12 | 1 | 1 | 18 | 1 |
auto | 1 | 12 | 1 | 1 | 18 | 1 |
- The `auto` value is not supported in quirks mode.
- The `auto` value is not supported in quirks mode.
- The `auto` value is not supported in quirks mode.
- The `auto` value is not supported in quirks mode.
- The `auto` value is not supported in quirks mode.
Syntax
.container {
margin: 0 auto;
}
.card {
margin: 16px;
}
.section {
margin-block: 2rem;
}Live demo
Use cases
-
Vertical rhythm
Space sections, paragraphs, and cards consistently so long pages remain readable.
-
Outer separation
Create distance between neighboring components without altering their internal padding.
Cautions
- Margin collapsing and negative margins can produce effects that are surprising if not understood clearly.
- Ad hoc margin values tend to create inconsistent spacing across a large system.
Accessibility
- Consistent spacing improves scanability and reduces visual crowding for many users.