margin properties

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 size of 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 right margin to 20% of the width of the element which contains the element. Note that that this is true even for margin-top and margin-bottom.

Length Values

We cover length values in detail in our section on values. Essentially though there are two types of length value. There are absolute values such as px. If you use one of these, the actual length of the margin will always be the same. You design much more flexible pages if you use a relative value, like em. If you use a relative value the size of the margin will always be proportional to the calculated size of the content of the element. This is to be encouraged.

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. Unfortunately most browsers do tend to set default margins on elements such as paragraphs. You can overcome this by specifically setting the margin for these types of element to 0.

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).

You can center an element in its parent, without using text-align on the parent element by giving the element a left-margin and a right-margin of auto.

Using percentage values for your margins is highly recommended for the design of flexible, accessible web pages. A percentage value for a margin ensures that the actual drawn size of the margin will always remain proportional to the size of the viewing portal.

Browser support

Internet Explorer Netscape Navigator Opera WebTV

Windows Macintosh (All Platforms) (All Platforms)

4.0 5.0 5.5 6.0 4.0 4.5 5.0 4.x 6.0 3.5 5.0 1.0

B B Y Y B B Y B Y Y Y N

Netscape Navigator 4.x: generally margins should not be set on list items. Either they don't show at all, or they are incorrectly applied and can cause the item to draw strangely. This is fixed in Netscape 6.
In older versions of all browsers, applying margins to inline elements, such as <img> was fraught with danger as it often caused all sorts of strange redrawing problems, and never seemed to work correctly anyway. This is fixed on the most recent versions of all browsers, which all draw margins on inline elements correctly.
Netscape Navigator 6 and Opera 5 both draw negative top and bottom margins somewhat strangely. Negative left and right margins are fine.
<table>, <tr> and <td> elements
There has always been inconsistent support here, and this hasn't changed. If you apply a margin to <table> elements, this is supported in all the most recent browser versions. The table will be drawn with additional space between its border and the element which contains it. This is a good way of centering a table on the page.
Even in the most recent browsers, applying a margin to <tr> elements either has strange effects (Opera 5) or no effect at all.
Applying a margin to <td> elements has no effect. You should use the table specific property border-spacing to create extra space between table cells, or remove this space altogether.

Internet Explorer							Netscape Navigator		Opera		WebTV
Windows				Macintosh			(All Platforms)		(All Platforms)
4.0	5.0	5.5	6.0	4.0	4.5	5.0	4.x	6.0	3.5	5.0	1.0
B	B	Y	Y	B	B	Y	B	Y	Y	Y	N
Netscape Navigator 4.x: generally margins should not be set on list items. Either they don't show at all, or they are incorrectly applied and can cause the item to draw strangely. This is fixed in Netscape 6. In older versions of all browsers, applying margins to inline elements, such as `<img>` was fraught with danger as it often caused all sorts of strange redrawing problems, and never seemed to work correctly anyway. This is fixed on the most recent versions of all browsers, which all draw margins on inline elements correctly. Netscape Navigator 6 and Opera 5 both draw negative top and bottom margins somewhat strangely. Negative left and right margins are fine. `<table>`, `<tr>` and `<td>` elements There has always been inconsistent support here, and this hasn't changed. If you apply a margin to `<table>` elements, this is supported in all the most recent browser versions. The table will be drawn with additional space between its border and the element which contains it. This is a good way of centering a table on the page. Even in the most recent browsers, applying a margin to `<tr>` elements either has strange effects (Opera 5) or no effect at all. Applying a margin to `<td>` elements has no effect. You should use the table specific property `border-spacing` to create extra space between table cells, or remove this space altogether.