<ul class="banner">
       <li><a href="#"><img src="../images/main/banner_sampleclass.gif" alt="" /></a></li>
       <li><a href="#"><img src="../images/main/banner_programdown.gif" alt="" /></a></li>
       <li><a href="#"><img src="../images/main/banner_learnsurrtest.gif" alt="" /></a></li>
       <li><a href="#"><img src="../images/main/banner_univownsystem.gif" alt="" /></a></li>
       <li><a href="#"><img src="../images/main/banner_whlifeelearning.gif" alt="" /></a></li>
</ul>

li 마진, 패딩 모두 0으로 해도 하단에 약간의 여백이 생긴다.

<tr>
  <td>
    <img src="--" />
  </td>
</tr>
<tr>
  <td>
    <img src="--" />
  </td>
</tr>

이런 식의 코딩에서도 마찬가지

이때
img {
vertical-align:bottom;
}

정의해줘서 해결 가능