css margin是元素的外边距，即元素边框到其它元素内容之间的距离，因此它有上下左右四个边距，分别是：

  • margin-top：上边距
  • margin-bottom：下边距
  • margin-left：左边距
  • margin-right：右边距

css margin 外边距

它还有一个简写的方式:

  •     margin: 外边距的缩写形式，同时设置上下左右四个边距。

margin语法

1）四个外边距的语法：

/*上边距*/
pading-top:value;
/*下边距*/
pading-bottom:value;
/*左边距*/
pading-left:value;
/*右边距*/
pading-right:value;

value值单位可以为em、ex、pt、px、百分比等。

默认情况下是margin为0px。

2） 简写形式的语法。

margin: 上边 [右边 下边 左边];

例如：

1） 四个参数的外边距

{margin: 5px 6px 6px 6px ;}    /*四个值为上、右、下、左*/
/*或*/
P{margin: 5px 6px 6px ;}       /*三个值为上、左右、下*/
/*或*/
P{margin: 5px 6px;}       /*2个值为上下、左右*/
P{margin: 5px;}       /*1个值为上下左右4个边距*/

例子

<!DOCTYPE html>
<html>
<title>css 外边距 margin</title>
<head>
<style>
p {  border:1px solid orange;  width:240px;
    background-color: pink;
}
p.ex {
    margin-top: 30px;
    margin-bottom: 30px;  margin-left: 40px;
    margin-right: 40px;
}
</style>
</head>
<body>
<h3>yxjc123.com 外边距例子</h3>
<p>此段落未以指定边距显示。 </p>
<p class="ex">本段以指定边距显示。</p>
</body>
</html>

效果如图：

css margin 外边距

2） 简写形式的外边距。

<!DOCTYPE html>
<html>
<title>css 外边距 margin</title>
<head>
<style>
p {  border:1px solid orange;  width:240px;
    background-color: pink;
}
p.ex {  margin:30px 40px; /*上下30px 左右40px*/
}
</style>
</head>
<body>
<h3>yxjc123.com 外边距例子</h3>
<p>此段落未以指定边距显示。 </p>
<p class="ex">本段以指定边距显示。</p>
</body>
</html>
我们看到效果是一样的。

css margin 外边距