CSS inline-block 여백, 틈 없애는 방법 (빈 공간 제거)

블록 요소를 가로 정렬할 때 display 속성을 inline-block으로 변경하면 됩니다. 가장 쉬운 방법 중 하나죠. 그러나 inline-block 속성으로 변경을 하면 한 가지 문제점이 발생합니다. 완전 치명적인 부분은 아니지만 1px 하나 하나에 민감한 레이아웃 작업에서는 다소 치명적일수도 있는 문제입니다. 여백이 생성된다는 것입니다. 아래의 예시를 봐주세요.

 

See the Pen CSS3 - display : inline-block ; 여백 초기화 by rgy0409 (@rgy0409) on CodePen.

 

wrap1과 wrap2의 아이디값을 가진 div 그룹이 있습니다. 각 div의 자식 요소에는 display : inline-block; 속성이 적용되어 있는 상태입니다. wrap1 그룹은 여백이 있는 반면 wrap2 그룹은 여백이 없이 따닥 따닥 잘 붙어있습니다. 그것은 아래의 속성 때문입니다.

 

#wrap2 {
    font-size: 0;
    letter-spacing: 0;
    word-spacing: 0;
}

CSS 탭을 눌러서 확인해 보시면 wrap2의 부모 div에 이 세가지의 속성이 적용되어 있음을 알 수 있습니다. 이렇게 하면 inline-block 속성을 사용해도 여백 없이 완벽하게 가로 정렬을 할 수 있습니다. 여백이 생기는 이유는 텍스트의 미세한 영역에 의해서 벌어지는게 아닐까 싶습니다. 따라서 부모 요소에 텍스트에 대한 영역을 완전히 지워버리면 이 틈 또한 사라집니다.

 

주의 사항이 있습니다. 부모 요소에서 폰트 크기와 기타 텍스트와 관련된 스페이싱을 모두 0으로 처리했기에 하부의 자식 요소에 텍스트가 들어가야 한다면 반드시 폰트 크기를 재정의해줘야 합니다. 위의 예시처럼요. 그래야 원하는 텍스트가 정상적으로 출력이 됩니다. 끝.