margin
margin creates space outside an element’s border. It is one of the primary tools for separating content blocks and controlling layout rhythm.
Overview
margin creates space outside an element’s border. It is one of the primary tools for separating content blocks and controlling layout rhythm.
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.
Related links
Powered by web-features