Margin Property
Last updated: 2026-09-13
margin Margin Property
The margin property sets the space around an element, that is, the distance between its border and neighboring elements. It is one of the most widely used box-model properties, serving to control spacing between elements, center elements horizontally, and add breathing room. Margins can be fixed lengths, percentages, or auto for browser-computed values.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | No |
| Applies To | all |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
margin: <length> | <percentage> | auto;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | The browser calculates the margin automatically. |
<length> | Type | A fixed margin value. |
<percentage> | Type | A percentage relative to the containing block's width. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| margin | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： Adjacent vertical margins collapse (margin collapse): the actual gap is the larger of the two values, not their sum.
Tip： margin:0 auto; horizontally centers a block-level element within its parent (it needs a definite width).
❓ FAQ
QWhat's the difference between margin and padding?
Amargin is the space outside the border, controlling the distance from neighboring elements and container edges, and negative values are allowed. padding is the space between content and border, controlling the content's distance from the box edges, and cannot be negative. padding also extends the background and click area, which margin does not, and only vertical margins collapse. When in doubt, use margin for layout gaps and padding for internal breathing room.
QWhy does margin:auto only center horizontally, not vertically?
ABlock-level elements automatically split leftover horizontal margin space between left and right, which is what centers them; normal flow has no equivalent mechanism for the vertical axis. To center vertically, make the parent a flex container with display:flex; align-items:center; justify-content:center, or a grid container with display:grid; place-items:center. In grid you can also use margin:auto on the item itself, since auto margins absorb the free space in both axes.
QWhat is margin collapse?
AIn the vertical direction, adjacent elements' top and bottom margins do not add up; the gap is the larger of the two values. That is margin collapse. A child's margin-top can also escape its parent and push the parent itself down. To prevent it, add padding or border to the parent, set overflow:hidden, or use flex or grid. Horizontal margins never collapse, so this only ever affects vertical spacing.
QWhat is the margin percentage relative to?
AMargins are always resolved against the containing block's width, its inline size, including margin-top and margin-bottom, which are computed from width rather than height. For example, with a parent 400px wide, margin-top:10% equals 40px. It is an intentional CSS rule that often surprises people, so it is worth keeping in mind when using percentage margins, especially for vertical spacing on responsive layouts.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
CSS Box Model
Understand the relationship between content, padding, border, and margin.
padding (Padding Property)
Learn about the space inside an element.
