이미지 태그를 이용하다보면 이상한 약간의 여백이 발생한다.

위 이미지를 보면 사진틀 이미지를 위아래로 나눈 것인데 아랫부분에 여백으로 인해서 약간의 공간이 생겼다.
확대해서 보면 아래와 같다.

약간의 여백이 생겨서 위 아래 이미지가 떨어진 현상을 발견하였다.
파이어 폭스로 해당 이미지의 부모 div 요소를 선택하면 아래와 같이 셀렉트 되어진다.

이유는 모르겠지만 해결 방법은 아래와 같다.

1. 이미지 요소에 vertical-align:top;을 삽입한다.

<img src="img_dummy.jpg" alt="사진" style="vertical-align:top;">

2.  li(리스트)에 연속으로 이미지를 넣을 때 1번의 vertical-align:top을 넣어도 여백이 생길 경우가 있다. 이럴 때는 이미지 부모 태그에 font-size:0;line-height:0;를 삽입한다.

<ul style="font-size:0;line-height:0;">
     <li>
          <img src="img_dummy.jpg" alt="사진">
     </li>
     <li>
          <img src="img_dummy.jpg" alt="사진">
     </li>
</ul>

3. 그래도 되지 않는다면 해당 이미지 요소에 display: block;을 삽입한다.

<img src="/img_dummy.jpg" alt="사진" style="display: block;">

정상적으로 이미지가 적용되면 아래처럼 여백이 없어진다.