css reset 以及哪些元素有默認margin padding值

很多網站在css reset 的時候有如下做法：

body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd,fieldset, img {

1. margin: 0;
2. padding: 0;
3. border: 0;
4. list-style: none;

}

 

也許你有些許懷疑，上面列出的標簽都有默認的 margin 和 padding 值么，是不是不管三七二十一，

就統統直接 margin:0 , padding:0  呢？

今天我們針對 body p ul ol dl dd 標簽來做一個實驗：

 

 

首先是 html 代碼：

 

不加任何 css reset，只添加  ul,ol,dl{ width:200px; height:100px; border:1px solid #f00; }

我們看到在 chrome 下表現是這樣的：

 

 

 

在 firefox  和 safari 下有相同的表現：

 

於是我們有如下總結：

1、body 水平垂直方向默認有 10px 的 margin 值；

2、p,ul,ol,dl 標簽垂直方向默認有 20px 的 margin 值，且這幾個標簽之間 20px 間距不重復；

3、dd 標簽在水平方向默認有 40px 的 margin 值；

4、ul,ol 標簽水平方向默認有 40px 的 padding 值(ie6/7下無)。

 

 

添加如下樣式后 firefox 下的表現：

body,p,ul,ol,dl,dd{ margin:0; }

ul,ol{ padding:0; list-style-position:inside; }

 

 

以上在 chrome 和 safari 下表現相同。

 

 

之所以對 ul,ol 添加 list-style-position:inside

是因為有如下發現：

1、ul,ol 設置 padding:0后，li 的項目符號（圓點或序號）消失，添加 list-style-position:inside 

    可恢復項目符號；

2、ul,ol 標簽對其添加 width 后，ie6/7 下無項目符號（圓點或序號），添加 list-style-position:inside

    可恢復項目符號。

 

ie7 下表現如：

 

以上在 ie6 下表現相同，故不重復上圖。

 

對 ul,ol 添加 list-style-position:inside 后，ie6下表現：

 

以上表現在 ie7 下相同。

 

 

 

綜上所述，我們 css reset 時也許可以這樣：

 

body, h1, ...,p, ul, ol, dl, dd{ margin:0; }

ul,ol{ padding:0; }

ps:因實驗所用ie6、ie7瀏覽器為ieTester工具，故實驗所得數據或結果可能不夠准確，如有錯誤請批評支出。