点击这里给我发消息 点击这里给我发消息

CSS入门基础教程:CSS边距属性

添加时间:2011-7-25
    相关阅读: 页面 HTML CSS

边距属性是用来设置页面中一个元素所占空间的边缘到相邻元素之间的距离。

  左边距属性(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>

本文作者:未知
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册