边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。
左边距属性(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}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-right即可。
上边距属性(margin-top)
这个属性用来设定上边距的宽度。示例如下：
.d1 {margin-top:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-top即可。
下边距属性(margin-bottom)
这个属性用来设定下边距的宽度。示例如下：
.d1{margin-bottom:1cm}
演示示例请参照左边距属性示例，只要将里面的margin-left改成margin-bottom即可。
边距属性(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>
相关CSS入门基础教程：CSS边距属性