Shulou(Shulou.com)06/03 Report--

This article focuses on "how to understand the padding and margin defaults of ol and ul". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to understand the padding and margin defaults of ol and ul.

In Chapter 5 of CSS Mastery, the author says that IE and Opera use margin-left to indent lists, while Safari and Firefox use padding-left. After my actual test, I found that Opera 9 (I measured is Opera 9.23), like FF and Safari, also uses padding-left. More precisely, their default style should be:

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

The default style for IE is:

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

Is Opera 8 or previous versions the same as IE? Comrades who are interested can take the test themselves.

But this at least shows that all browser vendors except Microsoft agree that list indentation should be controlled by padding. It's easy to understand that each item is indented rather than the entire list. What are the designers' expectations of list? For example, with background:green with ul set, most people should expect the entire ul (that is, parts that include padding) to use a green background color, rather than missing 30pt (usually equal to 40px) on the left side of the list. Second, the marker part (that is, the dot or numeric number part before item) is outside the li, but logically it is part of the list, within the list. The fact that IE uses margin actually causes the marker part to be suspended from the list. In fact, if list gets layout (hasLayout), you will find that marker is missing! Because in IE's infamous layout model, after hasLayout, the element object handles the rendering of the area it occupies, but cannot handle outside its area. This is why its width/height is actually similar to min-width/min-height, because it cannot draw the outside part of the overflow.

CSS Code copies content to the clipboard

Ol {background:green;}

Ol#myList2 {zoom:1;}

First item...

Second item...

Third item...

First item...

Second item...

Third item...

Therefore, a better way is to unify the margin and padding of list for all web pages, such as:

Ol, ul {margin-left:0; padding-left:40px;}

Or you can fix it for IE only:

Ol, ul {_ margin-left:0; _ padding-left:40px;}

At this point, I believe you have a deeper understanding of "how to understand the padding and margin defaults of ol and ul". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.