CSS: Removing borders around images screws up image positioning -

i'm trying put list of images horizontally wide, short bar. when positioned images, there borders around each. when removed borders, images shifted down few pixels, no longer appear contained in bar.

oddly, after -1.1em (or -11px), top margin of images won't decrease more. regardless of whether have borders around images or not; it's -1.1em small enough borders isn't without borders.

my html:

<div class="wrap">     <ul class="images">         <li><img src="1.bmp"/></li>         <li><img src="2.bmp"/></li>         <li><img src="3.bmp"/></li>         <li><img src="4.bmp"/></li>         <li><img src="5.bmp"/></li>         <li><img src="6.bmp"/></li>         <li><img src="7.bmp"/></li>         <li><img src="8.bmp"/></li>         <li><img src="long_image.bmp"/></li>     </ul> </div> 

and css:

div .wrap { position: relative; height: 2.5em; line-height: 2.5em; border: #000000 .1em solid; }  ul .images { list-style-type: none; }  li { display: inline; }  li img { margin-top: -1.1em; border-bottom: #000000 .1em solid; } 

try this:

<div class="wrap">     <ul id="list_images">         <li><img src="1.bmp"/></li>         <li><img src="2.bmp"/></li>         <li><img src="3.bmp"/></li>         <li><img src="4.bmp"/></li>         <li><img src="5.bmp"/></li>         <li><img src="6.bmp"/></li>         <li><img src="7.bmp"/></li>         <li><img src="8.bmp"/></li>         <li><img src="long_image.bmp"/></li>     </ul> </div>  #list_images ul{   margin: 18px 0;   padding: 0;   list-style: none; }  #list_images ul li{   margin: 0 10px 0 0;   padding: 0;   display: block;   float: left;   width: 80px;   border: 1px solid #000; } #list_images ul li img{   display:block;   width: 100%;   height: 100%;   text-decoration: none;   float: left; }