CSS spacing problem. need fresh eyes.(should be easy)

okay so this minor yet MASSIVE annoyace is that, i have a site im working on, and a panel in particular is behaving oddly.

i have a generic box div which will hold 2 images, one ontop of the other and i want absolutely no spacing inbetween them.

problem is that no matter what i do, when on dev mode it behaves normally, but when i publish, i see space inbetween the images.

normally, i dont set widths/height etc depending on what im doing but for this...its been SUCH the major pain that i declared heights on everything to make sure im not missing a few digits here or there, and still nothing.

heres an example of what is happening. (on my server) http://somdowprod.net/4testing/erase

if you look ther开发者_运维百科e, theres about a 5px space between the pic on top and the tst pic on bottom no matter the browser (ff/ie/chrome) ...thing is behaving like tables.......

heres the code for the inline css im testing/isolated:

   <style type="text/css">

body{ margin:0px; padding:0px;}

.nospacedammit{ margin:0px; padding:0px;}
#portS_mainW{ width:400px; height:500px; padding:0px; margin:0px;}
#portS_mainW img{ margin:0px; padding:0px; }
</style>

and heres the basic html for this panel:

    <div id="portS_mainW">
<span class="nospacedammit"><img src="images/xrodemo.jpg" alt="xro" width="400" height="300"/></span>
<span class="nospacedammit"><img src="images/erase.png" alt="xro" width="400" height="200"/></span>
</div>

ive added heights to make 100% sure about the #s, ive added margins/paddings to zero out on every element to again make sure theres no spacing.

ive also wrapped each image in a span tag, then added an overall everything to zero style to it ....trying to force zero spacing in every way i can thing of. and still nothing.

any ideas, insight i gladly appreciate.

thank you in advance.

You could set the line-height: 0; on the nospacedammit class. That is the reason that the space is inserted in between the 2 images.

Edit: you need to set the display to display: block as well

Try adding float:left to your images. Just tested this in Firefox 3.6 and it works for me :-)

I'm not 100% sure why this happens but my guess would be because none of your elements have any positioning applied to them, leaving it up to the browser to decide.

Try this:

<img class="nospacedammit" src="images/xrodemo.jpg" alt="xro" width="400" height="300"/>
<img class="nospacedammit" src="images/erase.png" alt="xro" width="400" height="200"/>

And add a property of display: block; to .nospacedammit