边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
margin-left左边距属性
这个属性用来设定左边距的宽度。示例如下：
.d1{margin-left:1cm}
实例代码：
<HTML>
<HEAD>
<TITLE>CSS左边距属性 margin-left</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin-left:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV class="D1">
<DIV class="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了左边距属性(margin-left)，表示这个div左边距为1厘米。</P>
<DIV class="D1">
<DIV class="D3">margin-left设为1cm</DIV>
</DIV>
</BODY>
</HTML>
效果如图：
margin-right右边距属性
这个属性用来设定右边距的宽度。示例如下：
.d1 {margin-right:1cm}
实例代码：
<HTML>
<HEAD>
<TITLE>CSS左边距属性 margin-right</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin-right:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV class="D1">
<DIV class="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了左边距属性(margin-left)，表示这个div左边距为1厘米。</P>
<DIV class="D1">
<DIV class="D3">margin-right设为1cm</DIV>
</DIV>
</BODY>
</HTML>
效果如图：
margin-top上边距属性
这个属性用来设定上边距的宽度。示例如下：
.d1 {margin-top:1cm}
实例代码：
<HTML>
<HEAD>
<TITLE>CSS左边距属性 margin-top</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin-top:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV class="D1">
<DIV class="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了左边距属性(margin-left)，表示这个div左边距为1厘米。</P>
<DIV class="D1">
<DIV class="D3">margin-top设为1cm</DIV>
</DIV>
</BODY>
</HTML>
效果如图：
margin-bottom下边距属性
这个属性用来设定下边距的宽度。示例如下：
.d1{margin-bottom:1cm}
实例代码：
<HTML>
<HEAD>
<TITLE>CSS左边距属性 margin-bottom</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin-bottom:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV class="D1">
<DIV class="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了左边距属性(margin-left)，表示这个div左边距为1厘米。</P>
<DIV class="D1">
<DIV class="D3">margin-bottom设为1cm</DIV>
</DIV>
</BODY>
</HTML>
效果如图：
margin边距属性
这个属性是设定边距宽度的一个快捷的综合写法，用这个属性可以同时设定上下左右边距属性。
可以为上下左右边距设置相同的宽度。示例如下：
.d1 {margin:1cm}
也可以分别设置边距，顺序是上，右，下，左。示例如下：
.d1 {margin:1cm 2cm 3cm 4cm}
上面的代码表示，上边距为1cm，右边距为2cm，下边距为3cm，左边距为4cm。
实例代码：
①上下左右边距宽度都相等
<HTML>
<HEAD>
<TITLE>CSS边距属性 margin</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin:1cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV class="D1">
<DIV class="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<HR>
<P>和上面两个div的CSS属性设置唯一不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，边距为1厘米，表示这个div上下左右的边距都为1厘米。</P>
<DIV class="D1">
<DIV class="D3">margin设为1cm</DIV>
</DIV>
</BODY>
</HTML>
效果如图：
②上下左右边距宽度都不相等
<HTML>
<HEAD>
<TITLE>CSS边距属性 margin</TITLE>
<STYLE type="text/css">
.D1{border:1px solid #FF0000;}
.D2{border:1px solid gray;}
.D3{margin:0.5cm 1cm 2.5cm 1.5cm;border:1px solid gray;}
</STYLE>
</HEAD>
<BODY>
<DIV class="D1">
<DIV class="D2">没有margin</DIV>
</DIV>
<P>上面两个div没有设置边距属性(margin)，仅设置了边框属性(border)。外面那个div的border设为红色，里面那个div的border属性设为灰色。</P>
<P>和上面两个div的CSS属性设置不同的是，下面两个div中，里面的那个div设置了边距属性(margin)，设定上边距为0.5cm，右边距为1cm，下边距为2.5cm，左边距为1.5cm。</P>
<DIV class="D1">
<DIV class="D3">上下左右边距宽度各不同</DIV>
</DIV>
</BODY>
</HTML>
效果如图：
浙公网安备 33010602011771号