HTML Dog
Skip to navigation

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

ValueNoteExample
[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:

ValueNoteExample
[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. */

Browser support