CSS Property: margin
The margin of a box, outside the border, padding, and content areas.
With one value, the margin
property can be used to specify a uniform margin around a box. With two, three, or four values, sides can be specified independently.
Possible Values
Value | Note | Example |
---|---|---|
[length] | 10px | |
[percentage] | Calculated as a percentage of the containing box’s width. | 25% |
auto | ||
inherit | ||
initial | ||
unset |
Multiple Values
One, two, three, or four space-separated values:
Value | Note | Example |
---|---|---|
[value] | [top, right, bottom, and left] | 10px |
[value] [value] | [top and bottom] [left and right] | 10px 20px |
[value] [value] [value] | [top] [right and left] [bottom] | 10px 20px 30px |
[value] [value] [value] [value] | [top] [right] [bottom] [left] | 10px 20px 30px 40px |
Example
#hedgehog { margin: 1em; }
/* Uniform margin of 1em on all four sides */
#hare { margin: 10% 20%; }
/* Top and bottom margins are each 10% of the containing box's width. Left and right margins are each 20% of the containing box's width. */
#shrew { margin: 10% inherit 30px; }
/* Top margin is 10% of the containing box's width. Left and right margins are inherited. Bottom margin is 30px */
#wildcat { margin: 10px 20px 30px 40px; }
/* Top margin is 10px. Right margin is 20px. Bottom margin is 30px. Left margin is 40px. */