CSS margin
CSS margin属性用于定义元素周围的空间。它是完全透明的，没有任何背景色。
可以使用单独的属性独立更改顶部，底部，左侧和右侧边距。您还可以通过使用速记边距属性来一次更改所有属性。
CSS保证金属性
| 属性 |
说明 |
| margin |
在一个声明中设置left、right、top、bottom属性。 |
| margin-left |
它用于设置元素的左边距。 |
| margin-right |
用于设置元素的右边距。 |
| margin-top |
用于设置元素的上边距。 |
| margin-bottom |
它用于设置元素的底边距。 |
CSS Margin的值
以下是Margin的一些值。
| 值 |
说明 |
| auto |
左右边距均匀的占据空间。 |
| length |
用于指定边距pt，px，cm等，其默认值为0px。 |
| ％ |
它用于定义包含元素宽度的百分比的边距。 |
| inherit |
用于继承父元素的边距。 |
注意：您还可以使用负值来重叠内容。
CSS Margin示例
您可以为元素的不同侧面定义不同的边距。
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;width:300px;
}
p.ex {
margin-top: 50px;
margin-bottom: 50px;
margin-right: 100px;
margin-left: 100px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的空白显示。</p>
</body>
</html>
输出：
此段落未以指定的边距显示。
此段落以指定的空白显示。
Margin简写属性
CSS简写属性用于缩短代码。它在一个属性中指定所有边距属性。
有四种类型可以指定margin属性。您可以使用其中之一。
margin:50px 100px 150px 200px;
margin:50px 100px 150px;
margin:50px 100px;
margin:50px;
1）margin:50px 100px 150px 200px;
topmargin值为50px
rightmargin值为100px
bottommargin值为150px
leftmargin值为200px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;width:300px;
}
p.ex {
margin: 50px 100px 150px 200px;
}
</style>
</head>
<body>
<p>未以指定的边距显示此段落。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>
输出：
未以指定的边距显示此段落。
此段落以指定的边距显示。
2）margin:50px 100px 150px;
topmargin值为50px
left+rightmargin值为100px
bottommargin值为150px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;width:300px;
}
p.ex {
margin: 50px 100px 150px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>
输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
此段落未以指定的边距显示。
此段落以指定的边距显示。
3）边距：50px 100px;
它标识：
顶部和底部边距值为50px
左右边距值为100px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;width:300px;
}
p.ex {
margin: 50px 100px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>
输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
4）边距：50px；
它标识出：
右上角左下角和左边距值为50px
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: pink;width:300px;
}
p.ex {
margin: 50px;
}
</style>
</head>
<body>
<p>此段落未以指定的边距显示。</p>
<p class="ex">此段落以指定的边距显示。</p>
</body>
</html>
输出：
此段落未以指定的边距显示。
此段落以指定的边距显示。
