css img display problem

[willg825]

Hi everyone -

I am trying to display 4 images, all horizontal. Pretty simple task, but for some reason, CSS/html adds about 2px blank space on the bottom and 2px blank space on the right of each margin, so they arent completely next to each other. I've read Eric Meyer's 'solution' to this problem, but it didn't work - for one, I have always been using transitional, never strict.

Here is the way I have it laid out: Am I missing something? It seems like it _should_ display it right next to each other./.. (i've also tried vertical-align: bottom; to no avail). Thanks everyone

<div id="top_img_disp">
<img src="img/img_1.jpg">
<img src="img/img_2.jpg">
<img src="img/img_3.jpg">
<img src="img/img_4.jpg">
</div>

#top_img_disp {
position: absolute;
display: block;
border: 3px solid black;
top: 30px;
left: 160px;
padding: 0; margin: 0;
}

[aus_dave]

Try putting all the <img> tags on one line i.e. not each one on a new line.

That fixes it, I'm not sure why though :). If you add font-size:0; to your <div> style that seems to work as well.