日期:2014-05-17  浏览次数:20652 次

CSS外边距属性(margin)的使用方法

CSS外边距属性(margin)的使用方法

??? 外边距是页面中设置元素与另一个元素之间距离的属性,如果想完全使用CSS布局代替传统table布局,那就需要好好掌握外边距的特性。

?

??? Html中有些标签带有默认的margin属性,比如<p><body>,在重新设置它们的值后就会覆盖默认样式。

??? 按照设置方位不同,margin有四个属性:

上边距(margin-top

??? 定义元素上方外边距的宽度,有三个属性值:

·??????????????? ????长度,用绝对长度和相对长度定义一个值。

·??????????????? ????百分数,基于父层元素的宽度的百分数。

·??????????????? ????auto,浏览器自动设置,多为居中显示。

示例:

? #sbj {margin-top:5px;}

右边距(margin-right

??? 和上边距相同,它定义元素右方外边距的宽度,设置方法和上边距margin-top相同。

下边距(margin-bottom

??? 和以上两属性相同,设置元素下方外边距宽度。

左边距(margin-left

??? 和以上三属性相同,设置元素左方外边距宽度。

外边距(margin

margin是外边距的综合写法,它可以同时定义上下左右四个方向的外边距宽度,定义顺序是顺时针的上---左。

?

? margintop right bottom left

?

??? 和前面paddingborder中介绍的一样,margin属性值的定义数量和它的方向是对应的。如果设置了四个值,则按照上右下左的顺序显示出效果;如果只设置一个值,将作用于四个边;如果定义两个值,第一个作用于上下,第二个值作用于左右;如果定义三个值,第一个作用于上方,第二个值作用于左右,第三个值作用于下放。

?

示例