ol li 에서..여백 조절에 대한 질문

[hiphapis]

　　1.　　　한글 Mozilla 포럼
　　2.　　　Web Standard Evangelism
　　3.　　　웹표준화 화이팅..!!
　　4.　　　모두모두 화이팅~!!

↑　　　　↑
A　　　　B

A여백은 조절이 가능한데..
B여백은 어떻게 조절을 하는지 모르겠네요..

Code: Select all

ol li
{
	margin-left : 0px;
	padding-left : 0px;
}

Code: Select all

ol
{
	margin-left : 0px;
	padding-left : 0px;
}

다 해봤는데, A에 대한 여백만 조절이 되지, B에 대한 조절은 안되네요..

[oragi]

각각의 브라우저 마다 다르게 나타나던데요.
익스가 가장 넓게 나타나고 파폭은 조금넓게 나타나는군요.

[eouia]

margin과 padding에 음수값을 줌으로써 각각 해결할 수 있습니다.
문제는 브라우저별로 수치가 다르다는 점인데, 이것은 hack으로....


그러나 hack을 선호하지 않는 저로서는, list-style-type:none;으로 일단 목록기호를 없앤 후, bakcground-image나 :before pseudo-element(IE에서는 안됨)를 써서 목록기호를 다시 적절한 위치에 보여주도록 합니다.

그러나 대개의 경우, <ul><li>가 목록기호를 포함한 채로 사용될 때에는 여백의 넓이가 크게 크리티컬한 디자인적 문제를 일으키지 않는 곳이 대부분이므로 이렇게 특별히 복잡하게 하지 않고, padding에 적절한 음수값을 주어서 브라우저별로 조금 틀리더라도 크게 이상하게 보이지 않는 수준으로 그냥 사용하고 맙니다.

[eouia]

제가 조금 착오를...
margin과 padding부분에서 설명이 틀렸습니다.


list-style-position:inside;
list-style-position:outside;
이 두 속성에 따라 일단 영향을 다르게 받습니다.
전자는 해당 블록에 목록기호가 포함되며,
후자는 해당 블록에 목록기호가 포함되지 않습니다.

후자를 쓰시면 브라우저간의 차이가 크게 보이지 않을겁니다.
(하도 list-style-type:none;만 써서 안보이게 하든지, 아예 신경을 안쓰든지만 하다보니 살짝 헷갈렸네요. )

[hiphapis]

네, 감사합니다!!

Code: Select all

ol
{
	list-style-position:inside;
	margin-left : 0px;
	padding-left : 0px;
}

이렇게 하니깐, 해결 되네요

감사합니다