inline-block 사이 간격 발생 (margin: 0)

<div>에 display: inline-block를 적용했는데

margin: 0 임에도 사이 여백이 발생한다.

 

<div></div>
<div></div>
<div></div>

원인은 <div> 태그 사이 줄바꿈, 공백이 빈칸(whitespace)으로 파싱되는 문제이다.

태그 사이 줄바꿈, 공백을 제거하면 아래와 같이 된다.

 

<div></div><div></div><div></div>

<div> 태그 사이 줄바꿈 제거

다만 이 경우, 코드 가독성을 심하게 해치게 되는데..

 

> 해결방법

1. [HTML] 빈 공간 주석처리

닫는 태그부터 다음 여는 태그 전까지를 주석처리한다.

<div>
</div><!--
--><div>
</div><!--
--><div>
</div>

2. [HTML] 닫는 태그 '>'를 줄바꿈하기

<div>
</div
><div>
</div
><div>
</div>

3. [CSS] container의 font-size: 0 설정

.div-wrapper {
    font-size: 0px;
}

4. inline-block 대신 float, flex 사용

  - 단, 가운데 정렬한다면 float은 추가 설정이 필요하고, flex의 경우 IE9에서 미지원한다.

 

HTML으로 처리하는 것보다 CSS 방식이 깔끔한 것 같다.