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属性值的定义数量和它的方向是对应的。如果设置了四个值,则按照上右下左的顺序显示出效果;如果只设置一个值,将作用于四个边;如果定义两个值,第一个作用于上下,第二个值作用于左右;如果定义三个值,第一个作用于上方,第二个值作用于左右,第三个值作用于下放。

 

示例:

 

 

  #qbj01 {margin:5px;}

  #qbj02 {margin:5px 1em 2cm 15%;}

  #qbj03 {margin:10mm 2px 3%;}

 

 

注意:

    外边距margin的值可以是负值。

    外边距margin总是透明的,不能加背景。

    NetscapeIE浏览器的<body>margin默认值为8pxopera浏览器为0,但opera浏览器的内边距padding8px,所以要想让它们的显示效果相同必须先进行margin的自定义。

 (转)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值