CSS Image gallery causing padding

[Seedy]

A small image-hover CSS gallery has a large area of padding below the images causing unnecessary scroll bars to appear. It's there permanently, not just during hover but I cannot seem to work out why. Can anyone spot what's causing it please?
Thank you in advance.

  <div id="gallery">
  <img class="default" src="blank.png" alt="">
   <ul>
   <li><a class="gallery" href="#x" title="" rel="nofollow"><img src="1tn.gif" alt=""><b><span></span><i><img src="1.png" width="524" height="344" alt=""></i></b></a></li>
   <li><a class="gallery" href="#x" title="" rel="nofollow"><img src="2tn.gif" alt=""><b><span></span><i><img src="2.png" width="524" height="344" alt=""></i></b></a></li>
   <li><a class="gallery" href="#x" title="" rel="nofollow"><img src="3tn.gif" alt=""><b><span></span><i><img src="3.png" width="524" height="344" alt=""></i></b></a></li>
   <li><a class="gallery" href="#x" title="" rel="nofollow"><img src="4tn.gif" alt=""><b><span></span><i><img src="4.png" width="524" height="344" alt=""></i></b></a></li>
   <li><a class="gallery" href="#x" title="" rel="nofollow"><img src="5tn.gif" alt=""><b><span></span><i><img src="5.png" width="524" height="344" alt=""></i></b></a></li>
   <li><a class="gallery" href="#x" title="" rel="nofollow"><img src="6tn.gif" alt=""><b><span></span><i><img src="6.png" width="524" height="344" alt=""></i></b></a></li>
   </ul>
  </div>

a.gallery, a.gallery:visited, a.gallery:hover, a.gallery:active {}
#gallery {width:100px; float:right; padding-left:50px; position:relative; top:10px; }
#gallery .default {position:absolute; left:22px; top:7px; border:0px solid #00ffff; z-index:0; }
#gallery ul {list-style:none; padding:0; margin:0; width:130px; float:right; }
#gallery ul li {display:inline; width:70px; height:60px; float:left; }
#gallery ul li a {display:block; width:70px; height:50px; text-decoration:none; padding:4px; border:1px solid #003366; }
#gallery ul li a img {width:70px; height:50px; border:0; }
#gallery ul li a b {position:absolute; left:-9999px; display:block; width:570px; height:360px; }
#gallery ul li a:hover,
#gallery ul li a:active,
#gallery ul li a:focus {white-space:normal; border-color:#00ffff; outline:0; }
#gallery ul li a:hover b {position:absolute; left:-600px; top:0px; z-index:100; }
#gallery ul li a:active b,
#gallery ul li a:focus b {position:absolute; left:-600px; top:0px; }
#gallery ul li a b i {display:block; width:570px; height:60px; text-align:center; display:table-cell; vertical-align:middle; }
#gallery ul li a b i img {width:auto; height:auto; border:1px solid #00ffff; }

[alt131]

Hi Seedy and welcome to css :)

Great code sample - made it easy to spot that <b> is the culprit. Setting a background-color and something like left:-99px in the snippet makes this easier to see: In a simple terms, the height is still being accommodated, even though the element has been positioned off screen to the left.

[Seedy]

Great, thank you alt131. By reducing to -99px, I see exactly what you explained.
Would you suggest a particular fix or would you, as I'm considering, just accept the consequences? It isn't after all that much of a problem, but more of a niggle.

Thanks :)

Edit:
I added ' top: -9999px;' which seems to work well. About to test it on other browsers, etc.

#gallery ul li a b {position:absolute; left:-9999px; top: -9999px; display:block; width:570px; height:0px; }

Edit2:

Yes, all seems well. Many thanks for your help.