이미지 공백은 왜 생기는 것일까?
이미지는 인라인 요소인데, 인라인 요소를 사용하면 보이지 않는 라인 박스(행 박스)를 생성합니다. 이 박스 안의 내용을 수직 정렬할 때 두 가지 방식이 존재합니다.
인라인 요소의 수직 정렬
-비표준 모드(IE7이하, doctype 선언하지 않은 문서): 박스의 border bottom에 맞추어 정렬
-표준 모드(doctype 선언한 문서): baseline에 맞추어 정렬
기준선(baseline)이란?
기준선(baseline)- 꼬리 부분(p, q, j, y등에서 아래 삐침)을 뺀 밑 선
디센더(descender) -기준선보다 밑으로 처진 부분(p, q, j, y 등에서 아래 삐침)
어센더(ascender)- 일반 소문자(a,c,e 등)보다 위로 나온 부분(b, d, f, h 등)
라인 박스 안에 글자가 없고 이미지만 있다 하더라도, 보이지 않는 글자의 디센더를 고려하여 기준선에 맞추다 보니 하단에 공백이 자연스레 생깁니다.
div 이미지 공백 없애기
1. 인라인 요소(이미지)를 블록 요소로 만들기
<style>
div {background:blue;}
img {display:block;}
</style>