The CSS margin properties define the space around elements.
CSS的边距属性定义元素周围的空间范围 

设置文字左边距 Set the left margin of a text
This example demonstrates how to set the left margin of a text.
Examples 实例:

以下是代码片段:
<head>
<style type="text/css">
p.margin {margin-left: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class="margin">This is a paragraph with a specified left margin [www.xwangye.com]</p>
</body>
</html>

学Oo网J3页24网(http://www.xwangye.com)

设置文字右边距 Set the right margin of a text
只要将上一个例子的p.margin的样式改为 "margin-right:2cm"即可设置右边距。
设置文字底边距 Set the top margin of a text
只要将上一个例子的p.margin的样式改为 "margin-top:2cm"即可设置上边距。
设置文字底边距 Set the bottom margin of a text
只要将上一个例子的p.margin的样式改为 "margin-bottom:2cm"即可设置下边距。
 

快速设置4边距

学Oo网J3页24网(http://www.xwangye.com)

其实我们可以使用一条语句对四边距进行设置例如:

学Oo网J3页24网(http://www.xwangye.com)

以下是代码片段:
p.margin{margin:2cm 3cm 4cm 5cm;}

学Oo网J3页24网(http://www.xwangye.com)

 说明:这四个值是按照上边距开始,以顺时针方向的四个边距,即依次为 上边距(2cm) 右边距(3cm) 下边距(4cm)和左边距(5cm)

学Oo网J3页24网(http://www.xwangye.com)

 

学Oo网J3页24网(http://www.xwangye.com)

当然这里我们也可以接收3个值的设置如下:

学Oo网J3页24网(http://www.xwangye.com)

以下是代码片段:
p.margin{margin:2cm 3cm 4cm;}

学Oo网J3页24网(http://www.xwangye.com)

 说明:上边距(2cm) 左右边距(3cm) 下边距(4cm)

学Oo网J3页24网(http://www.xwangye.com)

我们也可以设置2个值如下:

学Oo网J3页24网(http://www.xwangye.com)

以下是代码片段:
p.margin{margin:2cm 3cm;}

学Oo网J3页24网(http://www.xwangye.com)

说明: 上下边距(2cm) 左右边距(3cm)

学Oo网J3页24网(http://www.xwangye.com)

当然我们也可以只设置一个值,示例代码如下:

学Oo网J3页24网(http://www.xwangye.com)

以下是代码片段:
p.margin{margin:2cm}

学Oo网J3页24网(http://www.xwangye.com)

说明:四周边距都为2cm.

学Oo网J3页24网(http://www.xwangye.com)

 

学Oo网J3页24网(http://www.xwangye.com)

总结:The CSS margin properties define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once.
CSS边距定义元素周围的空间范围。它可让内容重叠。也可用分离的属性分别对上,下,左,右进行样式改变。用margin属性可以快速的设置所有边距。

Note: Netscape and IE give the body tag a default margin of 8px. Opera does not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly in Opera, the body padding must be set as well!
注意: 网景和IE默认给body标签加上了8px的边距。OPERA就没有这样的情况,相反的,OPERA有个默认的8px填充,所以要让页面在几个不同主流浏览器上的效果都相同就需要将属性设置妥当!

学Oo网J3页24网(http://www.xwangye.com)