HTML Cookbook Basic HTML Course

Margin Property Shorthand

There are 3 shorthand forms of the margin property. You may use them if you are comfortable using margins.

Margin declaration with 1 value

This shorthand form uses 1 value for all for 4 sides.

Form
margin:value

Example Rule
body {margin: 20px; }
This page would have 20-pixel margins on all four sides.

Margin declaration with 2 values

This shorthand form uses 2 values.

Form
margin: value1 value 2

value1 sets the top and bottom margins
value2 sets the right and left margins

Example Rule
body {margin: 20px; 30px; }
This page would have 20-pixel margins on the top & bottom and 30-pixel margins on the right & left.

Margin declaration with 4 values

This shorthand form lists the 4 margin values in clockwise order:
top right bottom left.

Form
margin: value1 value2 value3 value4

Example Rule
body {margin: 20px 15px 30px 25px;}
This page would have a 20-pixel margin at the top, a 15-pixel margin on the right, a 30-pixel margin on the bottom and a 25-pixel margin on the left.