white space

[urfriend]

I am have two imgs side by side, and I am trying to remove the white space between them.

<img src="...">
<img src="...">

I wish to indent my code for easy reading. However, if I do that, it renders a single white space between the images.

Is there a way to indent my code, and still remove the white space? I'm guessing this is a css issue, but I am not totally sure.

[rocknbil]

You will find the same problem with lists you try to style horizontally. With those, it's easier to just remove the returns/white spaces.

Otherwise *a* solution would be to put the images in a div that you can position as required and apply float to the images. To make this work, you will have to have a width on the div. Note my div is image width * 2 + image border widths, the borders are just so you can see what's happening.

The margin/padding on the images is probably optional, IE 6 is weird sometimes. :-)

The overflow property correctly "shrink wraps" the div so it contains all the floated children (the images.)

<style type="text/css"> 
img {  
 margin:0; 
 padding:0; 
 float: left;  
 border: 1px solid #ffff00;  
} 
div {  
 margin:auto;  
 width: 494px;  
 overflow: hidden;  
 border: 1px solid #ff0000;  
} 
</style> 

 <div> 
 <img src="some_image_245_px_wide.jpg"> 
 <img src="some_other_image_245_px_wide.jpg"> 
 </div>