CSS的margin外边距布局属性

返回文章首页
创建时间：一月 3th, 2008 Traffic(520)

margin

1、语法：margin : auto/length

2、参数：

（1）auto：由计算机设置相对边的值

（2）length：由浮点数字和单位标识符组成的长度值或百分数。百分数是基于父对象的高度。对于内联对象来说，左右外边距可以是负数值，而上下不可以。请参阅长度单位

3、说明

设置对象四边的外边距。默认值是0。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将作用于全部的四边。

如果提供两个，第一个作用于上、下，第二个作用于左、右。

如果提供三个，第一个作用于上，第二个作用于左、右，第三个作用于下。

内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。

外边距总是透明的，并且设置外边距不会直接影响对象的大小，只是相对位置发生变化。

对应的脚本特性为margin。

4、示例

5、提示

（1）因为#left设置了margin:0 5px 0 0;，右外边距，即设置了距离#right边框的距离为5px；#right设置了margin:0 0 0 5px;，左外边距，即设置了距离#left边框的距离为5px，所以#left和#right两个对象之间的距离是10px。

（2）#sub_right的margin:10px 0 0 10px;设置了上边距和左边距是10px，其它为0。但细心的朋友会发现，内联对象#sub_right距离其父对象#right的距离是20px，但明明左边距设置的是10px啊，FireFox下就正常是10px，难道margin属性具有继承性而FireFox不支持？答案是否定的，margin属性不具有继承性。下面用实例来说明。

如果把#sub_right的float:left;属性去掉在看看，怎么样，边距正常了吧。也许有人会说，加上float属性可能就具有了继承性。那么在看一个例子：将#right对象的margin:0 0 0 5px;属性改为margin:5px 0 0 5px;，如果具有继承性，那么上边距应该为15px，看下效果，#sub_right距离#right的上边距还是10px。事实证明margin属性也不具有继承性。但为什么还会出现这种结果呢？

答案又是IE的双边距BUG。这也是经常困绕初学者的一个问题。解决办法有很多，但近水推荐大家再遇到这样的问题就加display:inline;，意思是把对象视作行级元素。如此例中可将#sub_right中插入display:inline;代码就可以解决问题。请参见display属性。

（3）设置内联对象的上下边距是不会出现双边距问题的。这和上面举的例子有些矛盾，呵呵。不过要告诉大家的是margin不具有继承性，内联对象设置左右边距时出现双倍边距完全是IE的BUG。

margin属性是可以分别设置的。

margin-top、margin-right、margin-bottom、margin-left分别作用于上、右、下、左四边。语法和参数和margin的设置相同。

Posted by: 近水社区
相关文章：
相关模板：
暂无相关模板
上一篇：float和clear属性 下一篇：padding属性

Comments(0)

暂无留言。
User Name:
（必添）
User Email:
（必添）
User URL:
Comment:
（必添）