Css reset and which elements have the default margin padding value and marginpadding
Many websites use the following methods in css reset: body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, label, dl, dt, dd, fieldset, img {} may be a bit skeptical. Do the labels listed above have the default margin and padding values? Are they all directly margin regardless of the labels: 0, padding: 0? Today we are doing an experiment on the body p ul ol dl dd Tag:
The first is the html code:
Add ul, ol, dl {width: 200px; height: 100px; border: 1px solid # f00;} without adding any css reset. We can see that this is the case in chrome: similar performance in firefox and safari:
So we have the following summary: 1. the horizontal vertical direction of the body has a margin value of 10px by default; 2. the vertical direction of the p, ul, ol, and dl labels has a margin value of 20 PX by default, the 20 PX spacing between these labels is not repeated. 3. The dd label has a margin value of 40 PX by default in the horizontal direction. 4. ul, by default, the ol label has a padding value of 40 Px in the horizontal direction (none in ie6/7 ).
After the following style is added, the firefox will show: body, p, ul, ol, dl, dd {margin: 0;} ul, ol {padding: 0; list-style-position: inside;} and above are the same in chrome and safari. The reason for adding list-style-position: inside to ul is as follows: 1. After ul and ol are set to padding: 0, the project symbol (DOT or serial number) of li disappears, add list-style-position: inside to restore the project symbol; 2. After adding width to the ul and ol labels, ie6/7 does not have the project symbol (DOT or serial number ), add list-style-position: inside to restore the project symbol. Ie7 performance:
The above features are the same in ie6, so they are not repeated. After list-style-position: inside is added to ul and ol, ie6 is shown as follows:
The above is the same in ie7. To sum up, we may be able to do this in css reset:
body, h1, ...,p, ul, ol, dl, dd{ margin:0; }
ul,ol{ padding:0; }
Ps: Because ie6 and ie7 are ieTester tools in the experiment, the data or results obtained from the experiment may not be accurate enough. If there is any error, criticize the expenditure.