cascading style sheets guide

Margin

With cascading style sheets, any element can have a margin. A margin is the space between an element and the elements to its top, left, bottom and right. The margin properties are:

margin-top
margin-left
margin-bottom
margin-right
margin

margin-top, margin-left, margin-bottom, margin-right, margin

What it does

The margin properties set the top, left, bottom, right and all margins respectively.

Possible Values

Margins can be specified as either a percentage, a length or using the keyword auto.

Margins can be negative values.

Percentages

A percentage margin value sets the affected margin to that percentage of the width of the parent element. For instance, a margin-right: 20% sets the width of the top margin to 20% of the width of the element which contains the element.

Length Values

We cover length values in detail in our section on values. With length values, you can set the margin to an absolute value, or a value relative to the size of the element itself.

Default Values

If no margin value is specified, the margin of an element is zero. That is, there is no space between an element and adjacent elements.

Is it inherited?

An element does not inherit the margin property of the element which contains it.

Hints and suggestions

Margins can be used to achieve similar effects to the positioning properties which we discuss below and padding (we talk about padding next).