Ignore whitespace in HTML [duplicate]

Question

This question already has an answer here:

• How do I remove the space between inline-block elements? 35 answers

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!

Answer 1

The browsers does ignore whitespace in most cases when it's next to a block element.

The problem with images (in this case) is that they are inline elements, so while you write them on separate lines, they are actually elements on the same line with a space between them (as the line break counts as a space). It would be incorrect for the browser to remove the spaces between the images, writing the image tags with line breaks between them should be handled the same way as writing the image tags on the same line with spaces between them.

You can use CSS to make the images block elements and float them next to each other, that solves a lot of problems with spacing, both the space between the images and the spacing on the text line below images.

Answer 2

Try this CSS:

img { display: table-cell; }

Answer 3

you can set the font-size of the container to 0 and the white-space disappears!

Answer 4

Minify your HTML!

It is good practice to minify the response before it is rendered to the browser.

So unless you need the space (and you hard coded it using  ), you always remove the spaces in the minification process.

Answer 5

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>

Answer 6

What was so difficult about this solution?

css

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

html

<span class="no-whitespace">

    <a href=# title='image 1'>
       <img src='/img/img1.jpg' alt='img1'/>
    </a>

    <a href=# title='image 2'>
       <img src='/img/img2.jpg' alt='img2'/>
    </a>

    <a href=# title='image 3'>
       <img src='/img/img3.jpg' alt='img3'/>
    </a>

</span>