About OL and UL padding and margin default values

Source: Internet
Author: User
Tags min

OL, ul {padding-left:40px;}

and the default style of IE is:

OL, ul {margin-left:30pt;}

is Opera 8 or the previous version the same as IE? Interested comrades can test on their own.

But that at least suggests that the list's indentation should be controlled using padding, in addition to Microsoft's browser makers agreeing. In fact, this is very good to understand, indentation is every item rather than the entire list. What does the designer expect from the list? For example, set the UL Background:green, most people should expect the entire UL (that is, include the padding part) all use the green background color, but will not want to be missing 30pt (usually equal to 40px) on the left side of the list. Second, the marker part (the small dot or number ordinal part before the item) is outside of Li, but logically it is part of the list, within the list. and IE use margin, actually lead to marker part is hanging in the list. In fact, if the list gets layout (haslayout), you'll find marker missing! Because in IE's notorious layout model, the element object handles the rendering of the area it occupies, but cannot handle its region beyond the haslayout. This is also the reason its width/height is actually similar to min-width/min-height, because it cannot draw overflow to the outside part.

CSS Code copy content to clipboard
    1. <style>   
    2. ol { background:green; }   
    3. ol#mylis T2&NBSP;{&NBSP;ZOOM:1;&NBSP}   
    4. </style>   
    5.   
    6. < Ol id= "MyList1" >   
    7.     <li>First item...</li>   
    8.     <li>Second item...</li>   
    9.     <li>Third item...</li>   
    10. </ol>   
    11.   
    12. <ol id= "MyList2" >   
    13.     <li& Gt first item...</li>   
    14.     <li>second item...</li >   
    15.     <li>Third item...</li>   
    16. </OL>&NBSP;&NBSP


So, the better way to do this is to give all Web pages a unified list of margin and padding, such as:
OL, ul {margin-left:0; padding-left:40px;}

Or you can fix it only for IE:

OL, ul {_margin-left:0; _padding-left:40px;}

The following are the other users to add:

UL label padding and margin default value 40px

Padding and margin defaults for UL tags

UL tags in the FF default only padding value (ie: padding-left:40px), and in IE only the default has margin value (that is, margin-left:40px), so first define ul{margin:0;padding:0;} will be able to solve most of the problems.

Generally in the general style stipulated: BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD, img {padding:0;margin:0;}

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.