Css & #160; reset and which elements have default margin & #160; padding value, marginpadding

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.