Consistent List Indentation

  • 리비전 슬러그: Consistent_List_Indentation
  • 리비전 제목: Consistent List Indentation
  • 리비전 아이디: 198152
  • 제작일시:
  • 만든이: Ioseph
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line. One of the most common style changes made to lists is a change in the indentation distance -- that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they move over in Explorer, but sit stubbornly in place in Gecko-based browsers.

가장 흔하게 리스트에 적용되는 스타일 수정은 들여쓰기(indentation)거리의 수정입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.

In order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.

왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.

Making a List

리스트 만들기

First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet"), and is not yet part of a list itself. It hangs alone in the void, simple and unadorned., as shown in Figure 1.

먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.

Figure 1

That dotted red border represents outer edges of the the content-area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2.

빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.

Figure 2

Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <ul>). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3.

이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <ul>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.

Figure 3

Here, the dotted blue border shows us the edges of the <ul> element's content area. Since we have no padding for the <ul> element, its content wraps snugly around the three list items.

여기서, 푸른 점선 경계선은 <ul>엘리먼트의 내용물 지역의 경계를 보여줍니다. <ul>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.

Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4.

이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.

Figure 4

Visually, the markers are outside the content area of the <ul>, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the <li> elements, not the <ul>. They're sort of like appendages to the list items, hanging outside the content-area of the <li> but still attached to the <li>.

보여지는 것으론, 마커들은 <ul>의 내용물-지역의 바깥에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <li>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <lt>의 내용물-지역의 밖에 매달려 있으나 여전히 <li>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.

This is why, in every browser except Internet Explorer for Windows, markers are placed outside any border set for an <li> element, assuming the value of list-style-position is outside. If it's changed to inside, then the markers are brought inside the <li>'s content, as though they're an inline box placed at the very beginning of the <li>.

바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <li>엘리먼트에 지정된 보더밖에 놓이며, list-sytle-position값으로 outside를 취하게 되는 것입니다. 만일 값이 inside로 바뀌게 되면, 마커들은, 비록 <li>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <li> 안쪽으로 옯겨지게 됩니다.

Indenting It Twice

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 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.


Conclusion

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.

Recommendations

  • When altering the indentation of lists, make sure to set both the padding and margin.

Original Document Information

  • 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.
{{ wiki.languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}

리비전 소스

<p><span class="comment">Summary: Trying to change the indentation of lists with CSS is trickier than it looks, but only because CSS-conformant browsers took different paths to default indentation. Find out how to get them all in line.</span>
One of the most common style changes made to lists is a change in the indentation distance -- that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they move over in Explorer, but sit stubbornly in place in Gecko-based browsers.
</p><p>가장 흔하게 리스트에 적용되는 스타일 수정은 들여쓰기(indentation)거리의 수정입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.
</p><p>In order to understand why this is the case, and more importantly how to avoid the problem altogether, it's necessary to examine the details of list construction.
</p><p>왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.
</p>
<h3 name="Making_a_List"> Making a List </h3>
<h3 name=".EB.A6.AC.EC.8A.A4.ED.8A.B8_.EB.A7.8C.EB.93.A4.EA.B8.B0"> 리스트 만들기 </h3>
<p>First, we consider a single, pure list item. This list item has no marker (otherwise known as a "bullet"), and is not yet part of a list itself. It hangs alone in the void, simple and unadorned., as shown in Figure 1.
</p><p>먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다. 
</p><p><img align="none" alt="Figure 1" src="File:ko/Media_Gallery/Consistent-list-indentation-figure1.gif">
</p><p>That dotted red border represents outer edges of the the content-area of the list item. Remember that, at this point, the list item has no padding or borders. If we add two more list items, we get a result like that shown in Figure 2.
</p><p>빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다. 
</p><p><img align="none" alt="Figure 2" src="File:ko/Media_Gallery/Consistent-list-indentation-figure2.gif">
</p><p>Now we wrap these in a parent element; in this case, we'll wrap them in an unordered list (i.e., <code>&lt;ul&gt;</code>). According to the CSS box model, the list items' boxes must be displayed within the parent element's content area. Since that parent has no padding or margins yet, we get the situation shown in Figure 3.
</p><p>이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <code>&lt;ul&gt;</code>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다. 
</p><p><img align="none" alt="Figure 3" src="File:ko/Media_Gallery/Consistent-list-indentation-figure3.gif">
</p><p>Here, the dotted blue border shows us the edges of the <code>&lt;ul&gt;</code> element's content area. Since we have no padding for the <code>&lt;ul&gt;</code> element, its content wraps snugly around the three list items.
</p><p>여기서, 푸른 점선 경계선은 <code>&lt;ul&gt;</code>엘리먼트의 내용물 지역의 경계를 보여줍니다. <code>&lt;ul&gt;</code>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.
</p><p>Now we add the list item markers. Since this is an unordered list, we'll add traditional filled-circle "bullets," as shown in Figure 4.
</p><p>이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.
</p><p><img align="none" alt="Figure 4" src="File:ko/Media_Gallery/Consistent-list-indentation-figure4.gif">
</p><p>Visually, the markers are <i>outside</i> the content area of the <code>&lt;ul&gt;</code>, but that's not the important part here. What's key is that the markers are placed outside the "principal box" of the <code>&lt;li&gt;</code> elements, not the <code>&lt;ul&gt;</code>. They're sort of like appendages to the list items, hanging outside the content-area of the <code>&lt;li&gt;</code> but still attached to the <code>&lt;li&gt;</code>.
</p><p>보여지는 것으론, 마커들은 <code>&lt;ul&gt;</code>의 내용물-지역의 <i>바깥</i>에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <code>&lt;li&gt;</code>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <code>&lt;lt&gt;</code>의 내용물-지역의 밖에 매달려 있으나 여전히 <code>&lt;li&gt;</code>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다. 
</p><p>This is why, in every browser except Internet Explorer for Windows, markers are placed outside any border set for an <code>&lt;li&gt;</code> element, assuming the value of <code>list-style-position</code> is <code>outside</code>. If it's changed to <code>inside</code>, then the markers are brought inside the <code>&lt;li&gt;</code>'s content, as though they're an inline box placed at the very beginning of the <code>&lt;li&gt;</code>.
</p><p>바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <code>&lt;li&gt;</code>엘리먼트에 지정된 보더밖에 놓이며, <code>list-sytle-position</code>값으로 <code>outside</code>를 취하게 되는 것입니다. 만일 값이 <code>inside</code>로 바뀌게 되면, 마커들은, 비록 <code>&lt;li&gt;</code>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <code>&lt;li&gt;</code> 안쪽으로 옯겨지게 됩니다. 
</p>
<h3 name="Indenting_It_Twice"> Indenting It Twice </h3>
<p>So how will all this appear in a document? At the moment, we have a situation analogous to these styles:
</p>
<pre>ul, li {margin-left: 0; padding-left: 0;}</pre>
<p>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.
</p><p>In order to avoid this and get some indentation, there are really only three options available to browser implementors.
</p>
<ol><li> Give each <code>&lt;li&gt;</code> element a left margin.
</li><li> Give the <code>&lt;ul&gt;</code> element a left margin.
</li><li> Give the <code>&lt;ul&gt;</code> element some left padding.
</li></ol>
<p>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.
</p><p>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 <code>&lt;ul&gt;</code> element. If we apply a background color to the <code>&lt;ul&gt;</code> element and leave the list item and <code>&lt;ul&gt;</code> borders in place, we get the result shown in Figure 5. 
</p><p><img align="none" alt="Figure 5" src="File:ko/Media_Gallery/Consistent-list-indentation-figure5.gif">
</p><p>Gecko, on the other hand, sets a left <i>padding</i> of 40 pixels for the <code>&lt;ul&gt;</code> 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.
</p><p><img align="none" alt="Figure 6" src="File:ko/Media_Gallery/Consistent-list-indentation-figure6.gif">
</p><p>As we can see, the markers remain attached to the <code>&lt;li&gt;</code> elements, no matter where they are. The difference is entirely in how the <code>&lt;ul&gt;</code> is styled. We can only see the difference if we try to set a background or border on the <code>&lt;ul&gt;</code> element.
</p>
<h3 name="Finding_Consistency"> Finding Consistency </h3>
<p>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 <b>both</b> the left margin and left padding of the <code>&lt;ul&gt;</code> element. We can ignore <code>&lt;li&gt;</code> altogether for these purposes. If you want to reproduce the default display in Netscape 6.x, you write:
</p>
<pre>ul {margin-left: 0; padding-left: 40px;}</pre>
<p>If you're more interested in following the Explorer/Opera model, then:
</p>
<pre>ul {margin-left: 40px; padding-left: 0;}</pre>   
<p>Of course, you can fill in your own preferred values. Set both to <code>1.25em</code>, 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:
</p>
<pre>ul {margin-left: 0; padding-left: 0;}</pre>
<p>Remember, though, that in so doing, you'll have the bullets hanging outside the list and its parent element. If the parent is the <code>body</code>, there's a strong chance your bullets will be completely outside the browser window, and thus will not be visible. 
</p><p><br>
</p>
<h3 name="Conclusion"> Conclusion </h3>
<p>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.
</p>
<h3 name="Recommendations"> Recommendations </h3>
<ul><li> When altering the indentation of lists, make sure to set both the padding and margin.
</li></ul>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Eric A. Meyer, Netscape Communications
</li><li> Last Updated Date: Published 30 Aug 2002
</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
{{ wiki.languages( { "fr": "fr/Indentation_homog\u00e8ne_des_listes" } ) }}
Revert to this revision