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是外边距的综合写法,它可以同时定义上下左右四个方向的外边距宽度,定义顺序是顺时针的上-右-下-左。
margin:top right bottom left;
和前面padding、border中介绍的一样,margin属性值的定义数量和它的方向是对应的。如果设置了四个值,则按照上右下左的顺序显示出效果;如果只设置一个值,将作用于四个边;如果定义两个值,第一个作用于上下,第二个值作用于左右;如果定义三个值,第一个作用于上方,第二个值作用于左右,第三个值作用于下放。
示例:
#qbj01 {margin:5px;}
#qbj02 {margin:5px 1em 2cm 15%;}
#qbj03 {margin:10mm 2px 3%;}
注意:
外边距margin的值可以是负值。
外边距margin总是透明的,不能加背景。
Netscape和IE浏览器的<body>的margin默认值为8px,opera浏览器为0,但opera浏览器的内边距padding为8px,所以要想让它们的显示效果相同必须先进行margin的自定义。
(转)