복수의 inline-block 엘리먼트 사이에 발생하는 간격 제거하기

코드 :

코드 불러오는 중...

원하는 결과물 :

A

B

C

실제 출력결과 :

A

B

C

스타일의 display 속성에 inline-block 값이 지정된 개체(element)들을 일렬로 배치하면 위와 같이 개체와 개체가 만나는 부분에 작은 간격(space)이 생기는 것을 볼 수 있다. 이 문제는 각 개체를 글자처럼 표현하여 수평 정렬하는 inline-block 속성의 근본적인 원리에 기인하는 것으로 보인다.

이를 제거하기 위해 다양한 해법들이 제시되어 왔는데, 그 중 가장 유명한 것이 부모 개체의 font-size 또는 letter-spacing 속성을 0으로 만들고 inline-block 형태의 배치 속성을 가진 자식 엘리먼트에 다시 속성값을 지정해주는 방식이다. 배치 원리를 그대로 이용한 해법으로 이해와 활용이 쉽지만 코드가 다소 복잡해지고 em 또는 % 단위의 활용이 어렵다는 단점이 있다.

또 다른 고전적인 해법으로는 클로징 태그 생략, 강제 마진 적용, 태그 붙여쓰기 등이 있지만 이러한 방식들은 직관적이지 못하거나 브라우저에 따라 다른 결과를 출력할 수 있기 때문에 사용을 권장하지 않는다. flexbox 레이아웃을 사용하면 간단히 해결할 수 있지만 아직까지 한국의 인터넷 사용 환경에서는 레거시 브라우저를 고려하지 않을 수 없기 때문에 이는 논외로 한다.

그렇다면 inline-block 개체 간격을 제거하기 위해 어떤 방법을 사용하는 것이 가장 이상적일까?

코드 불러오는 중...

HTML 마크업에서 선행 개체의 클로징 태그 뒷부분과 후위 개체의 오프닝 태그 앞부분에 주석 태그를 붙이면 각 개체의 클로징, 오프닝 태그를 붙여 쓴 것과 같은 효과를 얻을 수 있다. 이를 응용하여 위 코드와 같이 두 inline-block 개체 사이에 주석 태그를 삽입하면 원하지 않는 간격의 발생을 방지할 수 있다.