TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
 Specialized Dev Zones Research Center eBook Library .NET Java C++ Web Dev Architecture Database Security Open Source Enterprise Mobile Special Reports 10-Minute Solutions DevXtra Blogs Slideshow

# CSS: Spacing and Areas : Page 17

## Learn to use proper spacing and make good use of your Web pages.

 by DEVX Staff
 Feb 13, 2004
 Page 17 of 18
Margin Top
{margin-top: XXunits/%}
The margin-top property lets you set the margin width of the top margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the top margin width using the height of the element's containing block. Negative values for margin widths can be used.

Example:

```

```

H1 {margin-top: 6cm}

``````

# If you are using a CSS-enabled browser, this headline has a 6-centimeter-tall top margin.

Margin Right
{margin-right: XXunits/%}
The margin-right property lets you set the margin width for the right margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the right margin width using the width of the element's containing block. Negative values for margin widths can be used.

Example:

``````

H1 {margin-right: 125pt}

``````

# If you are using a CSS-enabled browser, this headline has a 125-point-wide right margin.

Margin Bottom
{margin-bottom: XXunits/%}
The margin-bottom property lets you set the margin width for the bottom margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the bottom margin width using the height of the element's containing block. Negative values for margin widths can be used.

Example:

``````

H1 {margin-bottom: 2in}

``````

# If you are using a CSS-enabled browser, this headline has a 2-inch-tall bottom margin.

Margin Left
{margin-left: XXunits/%}
The margin-left property lets you set the margin width for the left margin of an element.

Margin width can be specified using absolute or relative units. Relative units calculate the left margin width using the width of the element's containing block. Negative values for margin widths can be used.

Example:

``````

H1 {margin-left: 5em}

``````

# If you are using a CSS-enabled browser, this headline has a 5-em-wide left margin.

Margin
{margin: XXunits/%}
The margin property lets you set the margin width of all four of an element's margins simultaneously.

Margin width is the transparent space around an element. It can be specified using absolute or relative units. Relative units calculate the margin width using the width of the element's containing block. Negative values for margin widths can be used.

You can enter one to four values to set different widths for different margins of an element. If there is one value, all four margins are the same width. If there are two values, the first value sets the top and bottom margins, and the second value sets the left and right margins. If there are three values, the first value sets the top margin, the second sets the left and right margins, and the third sets the bottom margin. If there are four values, the first sets the top margin, the second the right margin, the third the bottom margin, and the fourth the left margin.

Example:

``````

H1 {margin: 100px}

``````

# If you are using a CSS-enabled browser, this headline has a 100-pixel-wide margin surrounding it.

``````

H1 {margin: 2cm 1cm 3cm}

``````

# If you are using a CSS-enabled browser, this headline has a 2-centimeter-tall top margin, 1-centimeter-wide right and left margins, and a 3-centimeter-tall bottom margin.

``````

H1 {margin: 25%}

``````

If you are using a CSS-enabled browser, the headline has a margin that is a quarter of the width of this browser window.

Comment and Contribute

(Maximum characters: 1200). You have 1200 characters left.

Thanks for your registration, follow us on our social networks to keep up-to-date