{ LearnWebSiteDesign.com }

HTML, XHTML CSS Tutorials and Free Website Templates

CSS Margin Properties Tutorials

CSS margin properties define the space around HTML elements that is outside of the border. The margin does not have a background color and is transparent.

You can set the margins of all 4 sides (top, right, bottom and left) of an HTML element can be set independently using seperate properties or you can use a shorthand margin property to set all of the 4 sides in one declaration.

The image below shows you where the margin is in relation to an HTML element, the padding and border.

Property Values

The possible values of margin properties are listed below:

auto	The web browser sets the length and the result is dependant on the web browser
length	Defines a fixed margin, for example: pixels, pt, em, etc.
%	Defines a margin in % of the containing element

NOTE: CSS allows the use of negative margin values, which can result in overlapping content.

box model

Setting Margin for Individual Sides

The margin properties for setting all 4 sides independantly are listed below:

margin-top	Sets the top margin
margin-right	Sets the right margin
margin-bottom	Sets the bottom margin
margin-left	Sets the left margin

The code example below shows you how to set the 4 sides individually using seperate margin properties. A solid, black colored border of 1 pixel and a background of yellow has been applied to each paragraph to make it easier to distinguish the margins.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>LearnWebsiteDesign.com</title> <style type="text/css"> p { margin:0; border:1px solid black; background:yellow; } p.top { margin-top:200px; } p.right { margin-right:200px; } p.bottom { margin-bottom:200px; } p.left { margin-left:200px; } </style> <body> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a top margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a right margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a bottom margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This paragraph has a left margin of 200 pixels. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </body> </html>

The web page that the code example creates is here: CSS margin Properties Example.

Shorthand Margin Property

CSS allows you to set all margin properties in one declaration.

There are 4 ways to set the margin of all 4 sides using a shorthand margin property. The shorthand margin property can have from 1 to 4 values.

Shorthand Margin Property with 4 Values

The shorthand margin property example below has 4 values in the declaration. The first value (25px) is the top margin, the second vale (50px) is the right margin, the third (75px) is the bottom margin and last value (100px) is the left margin.

{ margin:25px 50px 75px 100px; }

Shorthand Margin Property with 3 Values

The shorthand margin property example below has 3 values in the declaration. The first value (25px) is the top margin, the second value (50px) is the right margin and the left margin and the last value (100px) is the bottom margin.

{ margin:25px 50px 100px; }

Shorthand Margin Property with 2 Values

The shorthand margin propety example below has 2 values in the declaration. The first value (25px) is both the top margin and the bottom margin and the second value (100px) is the right margin and the left margin.

{ margin:25px 100px; }

Shorthand Margin Property with 1 Value

The shorthand margin property example below has 1 in the declaration. The value (100px) is the margin for all 4 sides.

{ margin:100px; }

Home

Tutorials

Templates

Free Website Templates

References

CSS References