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;}