CSS IMG gap issue

I'm sure the necessary change for this is something fundamental, primarily because I'm new to using <span> and <div> markups. The following page:

http://www.drinkingauthority.com/DA2

. . .has the following issue: the title banner and menu bar have 4 pixel gap at the bottom. This isn't matching up with how I believe the CSS is supposed to be represented client-side. Below you will find the portion of the .php page and the entire CSS. (For those of you unfamiliar with .php, the .php snippet you see simply creates an IMG tag with a random number 1 or 2 in a portion of the address. Real simple.) Any idea how I could tighten up the format and get rid of that 4 pixel gap??


===== Start .php partial code =====

<div class=banner>
<?php echo "<img src=\"http://www.drinkingauthority.com/DA2/img/IMG_banner"; echo rand(1,2); echo ".gif\" border=\"0\">"; ?>
</div>

<div class=main_menu>

</div>

===== End .php partial code =====

===== Start CSS code =====

BODY { background-color: white }

.banner { width: 740; height: 100; border: solid black 2px; margin-bottom: 10px; }

.main_menu { width: 740; border: solid black 2px; margin-bottom: 10px; }

.user_interface { width: 150; margin-right: 10px; verticle-align: top; background-image: url(http://www.drinkingauthority.com/DA2..._BG_menu_l.gif); vertical-align: top }

.main_content { width: 420; margin-right: 10px; background-image: url(http://www.drinkingauthority.com/DA2...MG_BG_main.gif); vertical-align: top }

.context_menu { width: 150; background-image: url(http://www.drinkingauthority.com/DA2..._BG_menu_r.gif); vertical-align: top }

===== End CSS code =====

try closing the gap after the image...

Code: Select all

[img]http://www.drinkingauthority.com/DA2/img/IMG_BG_menu_t.jpg[/img]</div>