div에서 img 아래 공백 제거

오늘 페이지를 쓸 때div 중의img 아래에 공백이 있는 것을 발견했는데 이해가 안 가요. 한 번 찾아보니 어떻게 해결해야 할지 알 것 같아요!
  발생 원인:img 그림의 기본적인vertical-align은baseline이기 때문에 텍스트와 같이 줄이 높고 그림의 기본 정렬 방식은 텍스트 아래 기선과 정렬하기 때문에 공백이 생겼습니다!(개인적인 이해, 참고만 제공! 히히히!)  방법 1:div의line-height를 0으로 설정하기;

<div style="line-height:0;">
   <img src="    ">
<div>

  방법2:div의 font-size를 0으로 설정하기;

<div style="font-size:0;">
   <img src="    ">
<div>

  방법 3:img을 디스플레이:block으로 설정하기;

<div>
   <img style="display:block;" src="    ">
<div>

  방법 4:img의vertical-align을:bottom 또는middle 또는top로 설정하기;

<div>
   <img style="vertical-align:middle（ bottom top）;" src="    ">
<div>