Gaps caused by whitespace: solutions without changing HTML code?

[blaq]

When one encounters mysterious gaps between elements, like:

<div>
<img src="one.gif">
<img src="two.gif">
</div>

it's typically because the browser renders whitespace in the code as
text. (Like a space character.) The usual solution offered is to remove
any whitespace in the code, like this:

<div

<img src="one.gif"
<img src="two.gif"
</div>

or like this:

<div><!--
--><img src="one.gif"><!--
--><img src="two.gif"><!--
--></div>

Ick! Is there a more elegant workaround that doesn't involve modifying
the HTML? Perhaps some CSS? Font-size has no effect whatsoever on the
gap. I couldn't find anything except the code-related solutions above.

Thanks for your help.

[Harlan Messinger]

bl**@blaqzone.com wrote:

When one encounters mysterious gaps between elements, like:

<div>
<img src="one.gif">
<img src="two.gif">
</div>

it's typically because the browser renders whitespace in the code as
text. (Like a space character.) The usual solution offered is to remove
any whitespace in the code, like this:

<div

><img src="one.gif"
><img src="two.gif"
></div>

or like this:

<div><!--
--><img src="one.gif"><!--
--><img src="two.gif"><!--
--></div>

Or this:

<div><img src="one.gif"><img src="two.gif"></div>

[Jukka K. Korpela]

bl**@blaqzone.com <bl**@blaqzone.com> scripsit:

When one encounters mysterious gaps between elements, like:

<div>
<img src="one.gif">
<img src="two.gif">
</div>

it's typically because the browser renders whitespace in the code as
text. (Like a space character.)
You might put it that way. Anyway, you have real space characters between
the <img> elements, too. By the way, why do you use invalid markup, without
alt attributes? (To write sketchy code, <img> would be sufficient, so the
odds are that you really intend to omit alt attributes.)
The usual solution offered is to
remove any whitespace in the code, like this:

<div

><img src="one.gif"
><img src="two.gif"
></div>

Well, maybe. Or simply just
<div><img ...><img ...></div>
or like this:

<div><!--
--><img src="one.gif"><!--
--><img src="two.gif"><!--
--></div>

Ick!
Ick indeed. Comments considered harmful (in HTML). People just shoot
themselves on the foot with them.
Is there a more elegant workaround that doesn't involve modifying
the HTML?
No. You are not supposed to be able to remove character data (including
spaces) from HTML documents without actually removing it.
Perhaps some CSS?
You could play with positioning. But why are you trying to avoid the most
obvious and simplest solution, inventing possible workarounds that just
might work on sunny days (when CSS is on)?
Font-size has no effect whatsoever on the gap.

It has. Try setting font-size:60px to see the difference.

[Toby Inkster]

blaq wrote:

Ick! Is there a more elegant workaround that doesn't involve modifying
the HTML? Perhaps some CSS?

You might be able to use letter-spacing in CSS, but the better solution is
to remove the white space in your code.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Andy Dingley]

bl**@blaqzone.com wrote:

it's typically because the browser renders whitespace in the code as
text. Is there a more elegant workaround

Learn where the whitespace is significant. It's not a problem around
block elements, it's the inlines that are affected by it -- which
isn't altogether unreasonable.