Verständnisproblem DIV Höhe

[Flownie]

Hallo

Habe gerade ein kurzes Verständnisproblem:

Webseite, XHTML Strict
DIV mit UL, Inhalt Bilder:
  <div id="div_nav">
    <ul id="ul_nav">
      <li class="li_1"><img src="images/mainnav_shop.gif" alt="" width="27" height="12" /></li>
      <li><img src="images/mainnav_qa.gif" alt="" width="26" height="12" /></li>
      <li><img src="images/mainnav_blog.gif" alt="" width="24" height="12" /></li>
      <li><img src="images/mainnav_partner.gif" alt="" width="37" height="12" /></li>
      <li><img src="images/mainnav_contact.gif" alt="" width="40" height="12" /></li>
    </ul>
  </div>

Problem:
Ich kann das DIV nicht pixelgenau platzieren, weil oberhalb und unterhalb der Bilder noch freier Platz bleibt. Das DIV hat nicht die Höhe von 12px, wie die Bilder, sondern ist höher. Angabe von font-size: 0px; löst das Problem, das DIV ist dann genau so gross wie der Inhalt.

Frage:
Weshalb ist das so (dass das DIV anscheinend die Grösse einer Textzeile annimmt)? Und ist der Lösungsansatz mit font-size: 0px; der richtige, oder gibt es einen eleganteren Weg?

Danke
Marc