CSS reset and which elements have default margin padding values

Source: Internet
Author: User

Many websites have the following practices 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 some doubts, the labels listed above have default margin and padding value, whether it is 3,721, it is all directly margin:0, padding:0 It? Today we do an experiment for Body P ul ol DL DD Tag:

The first is the HTML code:


No CSS reset, only add ul,ol,dl{width:200px; height:100px; border:1px solid #f00;} We see this in chrome: the same behavior in Firefox and Safari:

So we have summarized as follows: 1, the body horizontal vertical direction default has a margin value of 10px, 2, P,UL,OL,DL label vertical default has a margin value of 20px, and these several tags 20px between the spacing is not repeated; 3, DD label in the horizontal direction default has 40px The margin value of 4, Ul,ol label horizontal direction default has 40px padding value (none under Ie6/7).
Add the following style after Firefox performance: body,p,ul,ol,dl,dd{margin:0;}  ul,ol{padding:0; list-style-position:inside; the above is the same in Chrome and Safari. The reason for adding list-style-position:inside to Ul,ol is because of the following findings: 1, Ul,ol set padding:0, Li's bullets (dots or serial numbers) disappear, add List-style-position: Inside recoverable bullets; 2, Ul,ol label to add width to it, IE6/7 under no bullets (dots or serial numbers), add list-style-position:inside recoverable bullets. IE7 performance as below:

The above performance is the same under IE6, so do not repeat. After adding list-style-position:inside to Ul,ol, the IE6 behaves as follows:

The above performance is the same under IE7. In summary, we may be able to do this when CSS reset:
Body, H1, ..., P, UL, OL, DL, dd{margin:0;}
ul,ol{padding:0;}


PS: Because the experiment used IE6, IE7 browser as IETester tool, so the data or results obtained may not be accurate, if there are errors, please criticize the expenditure.

CSS reset and which elements have default margin padding values

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.