[CSS] display: inline-block 적용 후 요소 간 간격 없애기

display: inline-block; 을 적용할 경우 요소간 미세한 간격이 생기게 됨. 

 

아래의 4가지 방법 중 하나로 이 여백을 없앨 수 있다.

   

1. HTML에서 해당 부분을 줄내림 없이 한줄로 마크업한다.

★2. 컨테이너 박스에 font-size: 0; 을 적용하고 여백을 없앤 요소에 font-size: px; 를 재정의 해줌

3. HTML의 <li> 태그에서(문제가 발생하는 부분) 닫는 태그를 생략한다.

4. 음수마진을 사용한다. (IE6, 7에서는 문제 발생 가능)

 

두번째 방법이 가장 적합한 방법이라 생각.