이미지 하단에 생기는 이상한 공백 없애기

HTML로 레이아웃을 설정하다보면 DIV태그 안 이나 P태그 안에 이미지가 있는 경우 이미지 하단에 약 1~3px정도의 공백이 생기는 경우를 볼 수 있습니다. 그 공백을 없애려고 이리 찾아보고 저리 찾아봐도 해결이 잘 되지 않는데요. 이것을 없애는 방법을 정리해 보려고 합니다.

▲ 하단에 파란색의 공백이 있음(표시를 위해 백그라운드색을 파란색으로 했음)

<div><img src="https://placeimg.com/400/300/any" /></div>

원인

위와 같이 Image를 DIV나 Table에 넣을 경우 하단에 원치않는 공백이 생깁니다.
그 이유는 Image가 인라인 요소이기 때문에 그런 것입니다. 인라인 요소의 경우 블록 요소와 달리 보이지 않는 가상의 기준선이 존재를 하는데 기본값으로 vertical-align의 baseline에 위치를 하게 됩니다. baseline은 영문 소문자로 치자면 아래 삐침이 없는 글자(a, b, c 등등..)의 아랫쪽에 위치하게 됩니다. 그렇기 때문에 아래 삐침이 있는 글자(y, g 등등..)을 고려하면 하단에 1~3px정도의 공백을 유지하게 되는 것입니다.

해결방안

원인을 알았으면 해결책은 쉽게 찾을 수 있습니다.

첫번째 방안

첫번째는 이미지의 vertical-align을 bottom으로 하는 것입니다. vertical-align : bottom은 아래삐침이 있는 글자까지 고려하여 하단으로 정렬하는 것입니다. 그렇게 되면 공백이 없어지게 되겠지요.

▲ vertical-align : bottom으로 하단에 파란색의 공백이 없어졌음

<div><img src="https://placeimg.com/400/300/any" style="vertical-align: bottom" /></div>

두번쨰 방안

두번쨰는 이미지를 인라인 요소에서 블록 요소로 속성을 변경시키는 것입니다. 블록 요소인 경우는 가상의 기준선이 없기 때문에 하단의 공백을 무시합니다. display : block로 변경을 하면 됩니다.

▲ display : block 으로 하단에 파란색의 공백이 없어졌음

<div><img src="https://placeimg.com/400/300/any" style="display: block" /></div>

인라인 요소와 블록 요소의 차이점을 확인하시려면 이전 포스팅을 확인해 주세요.