I am getting extra white space in my mark up when displaying images in a sidebar. The images are floated left in the format below and I am getting extra white space to the right of each image.
<img src=“/images/xxx.gif” />
<img src=“/images/xxx.gif” />
<img src=“/images/xxx.gif” />
But if I do this below the spacing is perfect
<img src=“/images/xxx.gif” /><img src=“/images/xxx.gif” /><img src=“/images/xxx.gif” />
Any ideas, tips or tricks?
Thanks in advance.
Wrap it in a span or div with the following style:
.images{ display:table; word-spacing:-1em; width:100%}
<span class=“images”>
<img src=“images/h.jpg”>
<img src=“images/h.jpg”>
<img src=“images/h.jpg”></span>
or you could do img {display:table-cell;}
Hope that helps.
You have invisible control characters to the right of each image which are producing the space. As you say, when the image code is arranged horizontally, without any additional characters between them your problem goes away. Try putting each image between<p></p> markup and set the top and bottom margin for yourDiv p to zero or a small number as required.
Since img is an inline tag, it’s gonna have to be in something. A p or div works.
Hi,
As the others have mentioned, images are inline elements and they behave like text when left in their default state.
If your images were really floated left it would kill the whitespace nodes, I think you meant to say they are inline. 
You don’t necessarily have to wrap each image in it’s own block, but I would wrap them all in a block.
Using dresden’s code above I would change <span class=“images”> to <div class=“images”>
[URL=“http://www.css-lab.com/bug-test/webkit-wordspace-bugfix.html”]
The method he is using to kill the whitespace nodes while formatting with new lines in the html was discussed in Quiz #35. The table display is a Webkit workaround since [URL=“http://www.css-lab.com/bug-test/webkit-word-spacing.html”]webkit completely ignores word-spacing on inline-blocks and does NOT collapse it on inline elements.