CSS Margin Properties

a margin defines the white space around an HTML element's border, while margin refers to the white space within the border.
Setting the actual value of margin is just the same as with margin, so you can probably zip right through this lesson.

margin Parameters

margin-top

To set the spacing at the top of an element,margin-top is used.
You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

CSS Code

P {margin-top: 15px;}

margin-right

To set the spacing to the right of an element,margin-right is used.
You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

CSS Code

P {margin-right: 15px;}

margin-bottom

To set the spacing at the bottom of an element,margin-bottom is used.
You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

P {margin-bottom: 30px;}

margin-left

To set the spacing to the left of an element,margin-left is used.
You can have negative values (e.g. - 2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

CSS Code

P {margin-left: 15px;}

margin

To set the general spacing that will be used on all sides of an element,margin is used.
You can have negative values (-2px), however, please be careful using this one, because if you specify a high negative value (or rather really low) you can cause the visitors browser to crash.

CSS Code

P {margin: 10px;}

The following code set the left margin of a text

CSS Code

<html>
<head>
<style type="text/css">
p.leftmargin {margin-left: 2cm}
</style>
</head>

<body>
<p>This is a paragraph with no margin specified</p>
<p class="leftmargin">This is a paragraph with a specified left margin</p>
</body>

</html>

The follwing table describe the border Properties:

Property	Description	values
margin	A shorthand property for setting the margin properties in one declaration	margin-top margin-right margin-bottom margin-left
margin-bottom	Sets the bottom margin of an element	auto length %
margin-left	Sets the left margin of an element	auto length %
margin-right	Sets the right margin of an element	auto length %
margin-top	Sets the top margin of an element	auto length %