CSS Margin(margin)
CSS Margin(margin) property defines the space around the element.
##Margin
margin clears surrounding elements (outer border) area. Margin has no background color and is completely transparent
margin can change the top, bottom, left, and right margins of the element independently. It is also possible to change all properties at once. Units can use pixels, percentages, centimeters, etc.
##CSS margin properties
In CSS, it can specify different margins for different sides
Attributes| Description | |
|---|
margin| Abbreviation attribute. Set all margin properties in one statement. | |
margin-bottom| Set the bottom margin of the element. | |
margin-left| Set the left margin of the element. | |
margin-right| Set the right margin of the element. | |
margin-top| Set the top margin of the element. | |
##Example
Setting the margins on different sides
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html> Run the program and try it out
Margin - shorthand attribute
To shorten the code, it is possible to use all edges specified by margin in one attribute distance attribute. This is called an abbreviation attribute.
The abbreviation property of all margin properties is "margin":
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>这是一个没有指定边距大小的段落。</p>
<p class="margin">这是一个指定边距大小的段落。</p>
</body>
</html>Run the program to try it
The margin attribute can have one to four values
margin
:25px 50px 75px 100px;
The top margin is 25px
The right margin is 50px
The bottom margin is 75px
The left margin is 100px
margin
:25px 50px 75px;
The top margin is 25px
The left and right margins are 50px
The bottom margin is 75px
margin
:25px 50px;
The top and bottom margins are 25px
The left and right margins are 50px
margin
:25px;
All 4 margins are 25px
##More examples
Set margins using centimeter and percentage values <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网（php.cn）</title>
<style>
p{background-color: #8de943
}
p.ex1 {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>一个没有指定边距大小的段落。</p>
<p class="ex1">一个2厘米上边距的段落。</p>
<p class="bottommargin">这是一个用百分比设置的下边距大小的段落。</p>
</body>
</html>Run the program to try it
Next Section
