Margin Properties
| Property | Possible Values | Description |
|---|---|---|
margin | auto, length (px, em, %), inherit | Shorthand for setting all four margins (top, right, bottom, left) |
margin-top | auto, length (px, em, %), inherit | Sets the top margin of an element |
margin-right | auto, length (px, em, %), inherit | Sets the right margin of an element |
margin-bottom | auto, length (px, em, %), inherit | Sets the bottom margin of an element |
margin-left | auto, length (px, em, %), inherit | Sets the left margin of an element |
Shortcut Values
| Value Format | Example | Meaning |
margin: 10px; | margin: 10px; | All sides = 10px |
margin: 10px 20px; | margin: 10px 20px; | 10px (top & bottom), 20px (left & right) |
margin: 10px 20px 30px; | margin: 10px 20px 30px; | 10px (top), 20px (left & right), 30px (bottom) |
margin: 10px 20px 30px 40px; | margin: 10px 20px 30px 40px; | 10px (top), 20px (right), 30px (bottom), 40px (left) |
Example:
.box {
width: 200px;
background-color: lightblue;
margin: 20px auto; /* Adds 20px margin on top & bottom, centers horizontally */
padding: 10px;
}✔ 20px margin on top & bottom
✔ Horizontally centered with auto