inline-block 여백 버그

일반적인 UL LI 리스트를 가로정렬시키려할때

LI에 css로 display:inline-block스타일을 적용하였을때 발생한다.

LI내부에 박스DIV를 만들면 쉽게 알 수 있다.

example

• 하나
• 둘
• 셋

<ul>

<li style="display:inline-block;"><div style="width:100px;height:100px;border:1px solid red;">하나</div></li>

<li style="display:inline-block;"><div style="width:100px;height:100px;border:1px solid red;">둘</div></li>

<li style="display:inline-block;"><div style="width:100px;height:100px;border:1px solid red;">셋</div></li>

</ul>

해결책은 여러가지가 있으나, 근본적인 문제는

li와 li 사이에 존재하는 줄바꿈 및 공백이 문제를 야기한다.

고로, 저 공백을 제거한다면 문제는 해결이 가능하다.

• 하나
• 둘
• 셋

<ul>

<li style="display:inline-block;"><div style="width:100px;height:100px;border:1px solid red;">하나</div></li><li style="display:inline-block;"><div style="width:100px;height:100px;border:1px solid red;">둘</div></li><li style="display:inline-block;"><div style="width:100px;height:100px;border:1px solid red;">셋</div></li>

</ul>

암튼, 알수 없는 공백으로 당황하지말고, 여백을 제거하면 끝!