Space beween my images ...

[mdumka]

Hello ...

I have 2 images I want side by side but I am getting some white space in between them.

<div class="myClass">
	<img src="images/one.jpg" />
	<img src="images/two.jpg" />
</div>

But this works ...

<div class="myClass">
	<img src="images/one.jpg" /><img src="images/two.jpg" />
</div>

Why?

[rufman]

code looks right to me.

[CSU-Bill]

What is the styling you are using for those two images?

Margin-left:0px; margin-right:0px;

You may also need to adjust the padding to eliminate the space between the images.

[tjunghans]

Hi

try converting the images to block elements:

img { display:block}

or

<img style="display: block" ...

This is only useful, if you have the images on top of one another and not next to each other.

[chris cressman]

Your first code block includes a line feed and/or carriage return character between the two IMG elements. In HTML, line feeds and carriage returns are considered white space. In other words, they are treated the same as a normal "space" character. The easiest way to remove the space between the two IMGs is to remove the line feed/carriage return (as you've done in your second code block).

Although we advocate the separation of presentation from markup, there are still many instances of markup affecting presentation. This is a clear example of that. Of course you could find a CSS technique to remove the space, but making a minor change to your markup is probably much easier.

[AutisticCuckoo]

Images generate inline boxes by default. Inline boxes are laid out horizontally along with other inline boxes – including those generated by text (and the white-space characters between your image elements are text).

To remove the space you can either get rid of the white-space characters or you can float the images with CSS. That has some side-effects that may be undesirable, though.

[mdumka]

Hi Guys, Thanks for all of the feed back.

What I was going for was a top navigation like images that had hyperlinks around every image for a horizontal display.

So lining up the images and links in one line of code would work, but the code would be brutal and hard to maintain.

So I started using display:block and float:left to get them to line up and everything worked out well.

Again ... thanks for the help to a very silly problem.

Mike

[gary.turner]

It is a poor practice, without compelling reason otherwise, to jigger the markup to support presentation. For this code,

<div class="myClass">
	<img src="images/one.jpg" />
	<img src="images/two.jpg" />
</div>

set a negative word-spacing, e.g.

.myClass {
  word-spacing: -.5em;
  }

The value will range from -.3em to -.5em. Most (all?) UAs won't allow words to overlap, so too large a value will generally be ok.

cheers,

gary

[Stomme poes]

What I was going for was a top navigation like images that had hyperlinks around every image for a horizontal display.

I wouldn't recommend building a menu out of images any more than building a house out of spoons. Are these background images? That might be one way to do it. At the very least, use a menu setup in your HTML.

So lining up the images and links in one line of code would work, but the code would be brutal and hard to maintain.

When I use display: inline-block (which has the same problem) I make my markup look goofy.
<ul>
<li><a href="blah">Blah</a><li
><li><a href="blah">Blah</a><li
><li><a href="blah">Blah</a><li
></ul>

though Gary's idea is nicer, wish I'd thought of it.

So I started using display:block and float:left to get them to line up and everything worked out well.

Actually, the float alone will do... because floats are blocks, so you don't even need to say display: block; : )