이미지 하단에 생기는 이상한 공백 없애기
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> 두번쨰 방안 두번쨰는 이미지를 인라인 요소에서 블록