Is there anything in HTML/CSS that tells the browser to ignore whitespace completely?
So many times when you want to put, say, two images next to each other - you try desperately to keep the HTML readable, but the browser puts a space between them.
So instead of something like this:
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
you end up with this
<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />
Which is just so horrible!
Oh, you can really easy accomplish that with a single line of CSS:
#parent_of_imgs { white-space-collapse: discard; }
Disadvantage, you ask? No browser has implemented this extremely useful feature (think of inline blocks in general) yet. :-(
What I did from time to time, although it's ugly as the night is dark, is to use comments:
<p><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--><img src="." alt="" /><!--
--></p>