如何理解ol和ul的padding和margin默认值

本篇内容主要讲解“如何理解ol和ul的padding和margin默认值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解ol和ul的padding和margin默认值”吧!

创新互联公司提供网站制作、成都做网站、网页设计,品牌网站制作1元广告等致力于企业网站建设与公司网站制作,十载的网站开发和建站经验,助力企业信息化建设,成功案例突破1000+,是您实现网站建设的好选择.

在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left的。更精确的说,它们的默认样式应该是:

ol, ul { padding-left:40px; }

而IE的默认样式是:

ol, ul { margin-left:30pt; }

Opera 8或者以前的版本是否和IE一样?有兴趣的同志可以自行测试。

但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,list的缩进应该使用padding来控制。其实这很好理解,缩进的是每一个item而不是整个的list。设计者对list有怎样的期望呢?比如说设置了ul的background:green,多数人应会期待整个ul(即包括了padding的部分)都使用绿色背景色,而不会希望在list的左侧缺失30pt(通常等于40px)。其次,marker部分(就是item之前的小圆点或者数字序号部分)是在li之外的,但从逻辑上说它属于list的一部分,在list之内。而IE使用margin,实际上就导致了marker部分是悬于list之外。实际上,如果list获得了layout(hasLayout),你就发现marker不见了!因为在IE臭名昭著的layout模型里,hasLayout之后,元素对象会自行处理其所占据区域的呈现,但是无法处理其区域之外。这也是其的width/height实际上类似min-width/min-height的原因,因为它无法绘制overflow到外面的部分。

CSS Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.     

  5. First item...
  6.   

  7.     

  8. Second item...
  9.   

  10.     

  11. Third item...
  12.   

  

  •   

  •   

  •     

  • First item...
  •   

  •     

  • Second item...
  •   

  •     

  • Third item...
  •   

  •   


  • 所以,比较好的方法就是给所有网页统一list的margin和padding,比如:
    ol, ul { margin-left:0; padding-left:40px; }

    或者也可以只针对IE进行修复:

    ol, ul { _margin-left:0; _padding-left:40px; }

    到此,相信大家对“如何理解ol和ul的padding和margin默认值”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    网站题目:如何理解ol和ul的padding和margin默认值
    本文网址:http://bzwzjz.com/article/ipecig.html

    其他资讯

    Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
    友情链接: 成都网站设计 公司网站建设 网站建设公司 网站建设方案 成都网站设计 成都网站建设 成都网站设计公司 成都网站建设 成都网站设计 成都网站设计 营销网站建设 营销型网站建设 H5网站制作 成都营销网站制作 网站建设 成都网站设计 成都品牌网站设计 响应式网站建设 移动网站建设 成都网站设计 自适应网站设计 手机网站建设