船长 发表于 2009-05-26 09:47 | 分类:css | 阅读数:444 次
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 实例:
<html>
<head>
<style type=”text/css”>
p.leftmargin {margin-left: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class=”leftmargin”>This is a paragraph with a specified left margin [www.52css.com]</p>
</body>
</html>
设置文字右边距 Set the right margin of a text
This example demonstrates how to set the right margin of a text.
Examples 实例:
<html>
<head>
<style type=”text/css”>
p.rightmargin {margin-right: 8cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified [www.52css.com] </p>
<p class=”rightmargin”>This is a paragraph with a specified right margin</p>
</body>
</html>
设置文字顶边距 Set the top margin of a text
This example demonstrates how to set the top margin of a text.
Examples 实例:
<html>
<head>
<style type=”text/css”>
p.topmargin {margin-top: 5cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified [www.52css.com] </p>
<p class=”topmargin”>This is a paragraph with a specified top margin</p>
</body>
</html>
设置底部边距 Set the bottom margin of a text
This example demonstrates how to set the bottom margin of a text.
Examples 实例:
<html>
<head>
<style type=”text/css”>
p.bottommargin {margin-bottom: 2cm}
</style>
</head>
<body>
<p>This is a paragraph with no margin specified</p>
<p class=”bottommargin”>This is a paragraph with a specified bottom margin</p>
<p>This is a paragraph with no margin specified [www.52css.com] </p>
</body>
</html>
快速设置四边边距 All the margin properties in one declaration
This example demonstrates how to set a shorthand property for setting all of the margin properties in one declaration.
Examples 实例:
<html>
<head>
<style type=”text/css”>
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins</p>
<p class=”margin”>This is a paragraph with specified margins [www.52css.com] </p>
<p>This is a paragraph with no specified margins</p>
</body>
</html>
CSS边距定义元素周围的空间范围。它可让内容重叠。也可用分离的属性分别对上,下,左,右进行样式改变。用margin属性可以快速的设置所有边距。
注意: 网景和IE默认给body标签加上了8px的边距。OPERA就没有这样的情况,相反的,OPERA有个默认的8px填充,所以要让页面在几个不同主流浏览器上的效果都相同就需要将属性设置妥当!