css?reset and which elements have default margin?padding value_html/css_WEB-ITnose

Many websites do the following when 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;

}

Maybe you have I have some doubts. Do the tags listed above have default margin and padding values? Do they just leave margin:0 and padding:0 regardless of

?

Today we will do an experiment on the body p ul ol dl dd tag:

First is the html code:

Do not add any css reset, only add ul,ol,dl{ width:200px; height:100px; border:1px solid #f00; }

We see that the performance under chrome is like this:

The performance is the same under firefox and safari:

So we have the following summary:

1. The body has a margin value of 10px by default in the horizontal and vertical directions;

> 2. The p, ul, ol, and dl tags have a margin value of 20px in the vertical direction by default, and the 20px spacing between these tags does not overlap;

3. The dd tag has a margin value of 40px in the horizontal direction by default Value;

4. The ul and ol labels have a padding value of 40px in the horizontal direction by default (none under ie6/7).

Performance under firefox after adding the following styles:

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

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

The above behaves the same under chrome and safari.

The reason why list-style-position:inside is added to ul,ol

is because of the following findings:

1. After ul,ol sets padding:0, the bullets (dots or serial numbers) of li disappear. Add list-style-position:inside

to restore the bullets;

2. After adding width to the ul and ol tags, there will be no bullets (dots or serial numbers) under IE6/7. Add list-style-position:inside

to restore the bullets.

The performance under ie7 is as follows:

The above performance is the same under ie6, so it is not the same Repeat the above picture.

After adding list-style-position:inside to ul,ol, the performance under IE6 is:

The above performance is the same under ie7.

In summary, our css reset may be like this:

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

ul,ol{ padding:0; }

ps:因实验所用ie6、ie7浏览器为ieTester工具，故实验所得数据或结果可能不够准确，如有错误请批评支出。