We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS





Figure 1


Figure 2

现在我们在外面加上父元素;这个例子中,我们使用一个无序列表(i.e., <ul>)。根据 CSS 盒子模型,列表项目的盒子必须显示在其父元素的内容区域里。因为这里的父元素既没有 padding 也没有 margin,所以我们得到下面的结果,如图3所示。

Figure 3

这里,蓝色的虚线边框表示 <ul> 元素内容区域的边缘。因为我们没有给 <ul> 元素添加内边距,  所以它的内容的包裹层紧贴在三个列表项外。


Figure 4




So how will all this appear in a document? At the moment, we have a situation analogous to these styles:

ul, li {margin-left: 0; padding-left: 0;}

If we dropped this list into a document as-is, there would be no apparent indentation and the markers would be in danger of falling off the left edge of the browser window.

In order to avoid this and get some indentation, there are really only three options available to browser implementors.

  1. Give each <li> element a left margin.
  2. Give the <ul> element a left margin.
  3. Give the <ul> element some left padding.

As it turns out, nobody seems to have used the first option. The second option was taken by Internet Explorer for Windows and Macintosh, and Opera. The third was adopted by Gecko, and by extension all the browsers that embed it.

Let's look at the two approaches for a moment. In Internet Explorer and Opera, the lists are indented by setting a left margin of 40 pixels on the <ul> element. If we apply a background color to the <ul> element and leave the list item and <ul> borders in place, we get the result shown in Figure 5.

Figure 5

Gecko, on the other hand, sets a left padding of 40 pixels for the <ul> element, so given the exact same styles as were used to produce Figure 5, loading the example into a Gecko-based browser gives us Figure 6.

Figure 6

As we can see, the markers remain attached to the <li> elements, no matter where they are. The difference is entirely in how the <ul> is styled. We can only see the difference if we try to set a background or border on the <ul> element.

Finding Consistency

Boil it all down, and what we're left with is this: if you want consistent rendering of lists between Gecko, Internet Explorer, and Opera, you need to set both the left margin and left padding of the <ul> element. We can ignore <li> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:

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

If you're more interested in following the Internet Explorer/Opera model, then:

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

Of course, you can fill in your own preferred values. Set both to 1.25em, if you like -- there's no reason why you have to stick with pixel-based indentation. If you want to reset lists to have no indentation, then you still have to zero out both padding and margin:

ul {margin-left: 0; padding-left: 0;}

Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the body, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible.


In the end, we can see that none of the browsers mentioned in this article is right or wrong about how they lay out lists. They use different default styles, and that's where the problems creep in. By making sure you style both the left padding and left margin of lists, you can find much greater cross-browser consistency in your list indentation.


  • 在你调整列表的缩进的时候,务必确认同时设置了 padding 和 margin.


  • Author(s): Eric A. Meyer, Netscape Communications
  • Last Updated Date: Published 30 Aug 2002
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
  • Note: This reprinted article was originally part of the DevEdge site.


此页面的贡献者: freshSep, Wenbin
最后编辑者: freshSep,