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

花花人

浏览: 68224 次
性别:
来自: 北京

最近访客更多访客>>

why519060759

zihai367

fanan_666

iamjustlyl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java Web开发

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的自定义。

（转）

分享到：

js、html中的单引号、双引号及其转义使用 | com.liferay.util.ParamUtil.java

2011-11-16 09:30
浏览 936
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论