The CSS margin properties define the space around elements.
Margin
The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.
Possible Values
| Value | Description |
|---|---|
| auto | The browser sets the margin. The result of this is dependant of the browser |
| length | Defines a fixed margin (in pixels, pt, em, etc.) |
| % | Defines a margin in % of the containing element |
It is possible to use negative values, to overlap content.Margin - Individual sides
In CSS, it is possible to specify different margins for different sides:
Example
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Margin - Shorthand property
To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property.
The shorthand property for all the margin properties is "margin":
Example
<html>
<head>
<style type="text/css">
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<p class="margin">This is a paragraph with specified margins.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
The margin property can have from one to four values.
- margin:25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
- margin:25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
- margin:25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
- margin:25px;
- all four margins are 25px
More Examples
Set the top margin of a text using a cm value
This example demonstrates how to set the top margin of a text using a cm value.
Example
<html>
<head>
<style type="text/css">
p.ex1 {margin-top:2cm;}
</style>
</head>
<body>
<p>A paragraph with no margins specified.</p>
<p class="ex1">A paragraph with a 2cm top margin.</p>
<p>A paragraph with no margins specified.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
Set the bottom margin of a text using a percent value
This example demonstrates how to set the bottom margin in percent, relative to the width of the containing element.
Example
<html>
<head>
<style type="text/css">
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified.</p>
<p class="bottommargin">This is a paragraph with a specified bottom margin.</p>
<p>This is a paragraph with no margin specified.</p>
</body>
</html>
Try it yourself in Notepad or Dreamweaver by coping and pasting the code above.
All CSS Margin Properties
| Property | Description |
|---|---|
| margin | A shorthand property for setting the margin properties in one declaration |
| margin-bottom | Sets the bottom margin of an element |
| margin-left | Sets the left margin of an element |
| margin-right | Sets the right margin of an element |
| margin-top | Sets the top margin of an element |
