福州音谷信息科技有限公司首页
设为首页 | 加入收藏 | XML | 联系我们
首页 | 关于我们 | 服务项目 | 工程案例 | 新闻中心 | 建站常识 | 音谷观点 | 网站地图
网站首页 > 建站常识

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

来源:音谷建站 日期:2012-4-15 11:35:34
外边距是页面中设置元素与另一个元素之间距离的属性,如果想完全使用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的自定义。

标签:CSS外边距属性 margin CSS布局 table布局 margin属性


相关文章
版权所有 福州音谷信息科技有限公司
公司地址:福州市苍山区金榕南路10号榕城广场4号楼218室
电话:0591-88074907、18650329114 传真:0591-88074907 联系人:龚先生
主营业务:网站建设网络整合推广行业网站运营市场调研网络信息咨询行业论坛策划与组织
福州音谷信息科技有限公司旗下网站:声屏障信息门户网 | 声学材料信息网 | 音谷声学网 |