discuz 教程：关于 ol 和 ul 的 padding 和 margin 默认值

这篇文章主要介绍了关于 ol 和 ul 的 padding 和 margin 默认值, 需要的朋友可以参考下
在《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 代码
 

<style>   

2.ol { background:green; }   

3.ol#myList2 { zoom:1; }   

4.</style>   

5.  

6.<ol id="myList1">   

7.    <li>First item...</li>   

8.    <li>Second item...</li>   

9.    <li>Third item...</li>   

10.</ol>   

11.  

12.<ol id="myList2">   

13.    <li>First item...</li>   

14.    <li>Second item...</li>   

15.    <li>Third item...</li>   

16.</ol>  

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

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

ol, ul { _margin-left:0; _padding-left:40px; } 
下面是其他网友的补充：
UL 标签的 padding 与 margin 默认值 40px

UL 标签的 padding 与 margin 默认值

ul 标签在 FF 中默认只有 padding 值 (即：padding-left:40px), 而在 IE 中只默认有 margin 值（即：margin-left:40px）, 所以先定义 ul{margin:0;padding:0;} 就能解决大部分问题。

一般都在总样式规定一下：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img {padding:0;margin:0;}