display:inline-block을 사용하여 항목 가로로 나열시 항목간 공백 문제

메뉴또는 쇼핑몰의 사품목록과 같이 가로로 항목을 나열하는 표현을 할때 사용되는 몇가지 방법중 하나가 display:inline-block 입니다.

이외에 float를 사용하는 방법도 있지만, 전 전자의 방법을 선호합니다.

display:inline-block을 사용할때 주의 해야할 점중의 하나는, 항목간의 간격이 벌어질 수 있다는 것입니다.

예를 들어, 30px, 30px,30px을 가로로 배열하기 위하여 display:inline-block을 적용하면, 이 항목들을 감싸고 있는 컨테이너의 폭이 90px일지라도  간격벌어짐으로 인하여 가로로 다 배열이 되지 않을 수도 있다는 것입니다.

이를 해결하기 위해서는 컨테이너에서 font-size, line-height(세로간격의 경우)를 0으로 설정하여 간격을 없애고, 각 항목에서 다시 font-size등을 지정해 줘야 합니다.