|
|
|
|
|
|
| |
The margin property (CSS Reference)
Introduction
The margin property can be used to define the margin for an
element. To give all 4 borders different settings you have two possibilities:
The first one is to declare the margin in one definition separated with a space
– something like this:
margin: 10,20,30,40;
If you use it this way, then you have to follow some rules:
|
Amount of margins:
|
Description:
|
|
1 margin
(margin:10)
|
If you use only one margin, then it will be used for all
four borders.
|
|
2 margins
(margin: 10,20)
|
The first margin will be used for the top and bottom
border and the second one for the left and right border.
|
|
3 margins
(margin: 10,20,30)
|
The first margin will be used for the top, the second for
left and right, and the third for the bottom border.
|
|
4 margins
(margin: 10,20,30,40)
|
The first one will be used for the top, the second one for
right, the third one for bottom, and the fourth for the left border.
|
The second option is to define the margins with the
sub-properties of margin:
|
Sub-Property:
|
Description:
|
|
margin-bottom
|
Defines the bottom margin.
|
|
margin-left
|
Defines the left margin.
|
|
margin-right
|
Defines the right margin.
|
|
margin-top
|
Defines the top margin.
|
Example
<!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">
<head><title>margin Demonstration</title>
<style type="text/css">
p.CenterWithMargin
{
margin: 20% 20%
20% 20%;
}
</style>
</head>
<body>
<h1><p>margin demonstration</p></h1>
<p class="CenterWithMargin">This text is
aligned with the help of margins</p>
</body>
</html>
Output
Values
|
Name:
|
Description:
|
|
auto
|
This value can be used to set the margin automatically.
|
|
length
|
The following values can be also used to define the margin:
cm (centimeter)
em (ems)
inch (inches)
mm (millimeters)
pc (picas)
px (pixels)
pt (points)
|
|
percentage
|
This value can be used to define the margin with
percentages. You have to use the percentage sign %.
|
|
|
|
|
|
|
|
|
Email TopXML