256

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!

7
  • 2
    Unrelated to the problem: there's a subtle difference between HTML and XHTML. You're talking about HTML, but posting XHTML code (in HTML the img tag is a shorttag).
    – BalusC
    Apr 13, 2010 at 16:09
  • 2
    See my answer in this question for a full set of options relevant now: stackoverflow.com/questions/14630061/…
    – ktamlyn
    Jan 31, 2013 at 20:57
  • 1
    display: table-cell works great in all the browsers I've tested.
    – Jasmine
    May 7, 2013 at 17:46
  • 1
    All options are covered here: css-tricks.com/fighting-the-space-between-inline-block-elements Aug 22, 2014 at 10:37
  • 1
    This has got to be one of the most annoying issues us web developers/designers come across. I can't believe it hasn't been fixed yet, for real.
    – Josh M.
    Jun 25, 2015 at 15:51

12 Answers 12

230

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>
15
  • 6
    Apparently that property has been renamed a lot; as of now, the page says "Major Changes...February 2011...Renamed ‘white-space-collapsing’ to ‘bikeshedding’."
    – ysth
    Jun 28, 2011 at 19:08
  • 4
    And later css working group minutes say it will be text-space-collapse.
    – ysth
    Jun 28, 2011 at 19:58
  • 27
    CSS would be text-space-collapse:trim-inner with latest changes in specification
    – yunzen
    Jan 11, 2012 at 11:42
  • 21
    It has moved to level 4, dev.w3.org/csswg/css4-text/#white-space-collapsing, which means far future for us :-(
    – Boldewyn
    Sep 6, 2012 at 6:38
  • 7
    Setting white-space: nowrap; on the parent container worked for me recently.
    – Rich B
    Apr 15, 2015 at 16:17
129

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

6
  • 13
    +1. It's a horrible hack, but it works, and seems like the best solution in the absence of support for the white-space-collapse style. (but note: if you have text in the child elements, you also need to set the font size back to normal again for them, or all your content will vanish)
    – Spudley
    May 27, 2011 at 9:43
  • 3
    You also lose the ability to use percentages for font sizes as they are calculated as a percentage of the parent container (which will be 0)
    – gsteinert
    Aug 19, 2011 at 14:32
  • 2
    Interestingly, this works in Chrome but not Safari (tested Chrome 22, Safari 5.1.7). It works in Safari if you specify a height of 1px.
    – mhenry1384
    Oct 24, 2012 at 19:31
  • 1
    when you're using em unit this solution doesn't work either. But you can use rem unit (widely implemented) instead. I think rem unit is more practical. then you could use font-size 0 as far as you needed Jun 15, 2015 at 12:03
  • 3
    You can restore the font-size for child elements of the container using something like #container > * { font-size: initial; }.
    – c24w
    Dec 9, 2016 at 17:23
55

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.

7
  • 2
    I think using CSS to hack around something that can be very easily fixed in the HTML source is overkill and likely to cause you problems in any complex layout. It also doesn't degrade well.
    – Jon Grant
    Apr 13, 2010 at 8:59
  • 3
    @Lee: Sorry, you got it wrong. (See IP's answer to Matts comment to your answer.)
    – Guffa
    Apr 13, 2010 at 10:52
  • 10
    @Jon: It's not about "hacking around" something. The layout should preferrably be controlled by the CSS, so specifying how the images are displayed should actually rather be in the CSS than in the HTML.
    – Guffa
    Apr 13, 2010 at 10:56
  • 4
    It is hacking if you have to float the images (what if they are inline with something else? now you have to float everything. what if there is already something else floated? now you have to break the semantic layout of your page to deal with it) or use relative positioning that relies on the size a space character is rendered.
    – Jon Grant
    Apr 14, 2010 at 11:57
  • 1
    @Jon: What's with you and "hacking"? Floating the images is one way of solving the problem that works in some situations. I have neither said that it's the only solution nor that it is always applicable.
    – Guffa
    Apr 14, 2010 at 13:11
51

The newest solution for this is using display: flex on outside container, you can try this with following example:

Codepen →

(And yes, Flexbox is becoming widely supported: http://caniuse.com/#search=flexbox)

Also, if you want your items to wrap (as standard inline-block elements do), don't forget to add flex-wrap: wrap to your flexbox container.

.box {
  display: flex;
  display: -webkit-flex;
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

6
  • 5
    Flexbox FTW- See here, here, here, and here,
    – Yarin
    Dec 13, 2014 at 13:50
  • Flex is not widely supported. You are fooled by the amount of green on the caniuse page. It is not supported by Safari Versions before Safari 9 nor on older iPads or older iPhones. Jun 6, 2016 at 22:02
  • 1
    @CrystalMiller this depends on your definition of 'widely' of course. I consider 94%+ to be 'wide enough'. Your case may be different. I did not say it is supported by 100% of browsers.
    – ted451
    Jun 6, 2016 at 23:51
  • While I agree it does depend on what you need to support, I wouldn't say the support for flex is quite 94%, as it is not supported by any of the old Safari versions (Mobile or Desktop) nor IE (until 11 & virtually no IE user is using IE11) & only certain versions of Firefox. I use flex in some portions of my site & I found that a large portion of my users are not seeing the site flex. Jun 14, 2016 at 18:43
  • Great solution. If you have to support pre-flexbox, my heart goes out to you. Nov 23, 2021 at 20:12
45

Unfortunately, newlines count as space characters.

The best solution I have come up with is to use the whitespace inside the tags themselves, instead of outside:

  <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" />

It's not ideal, either, I know. But at least it's not some bizarre CSS hack that relies on the size a space character is rendered or resorting to relative positioning, or JavaScript :)

4
  • I've also used this, although it does cause some weaker HTML tools to barf horribly. (Not so much XHTML.) Feb 14, 2011 at 18:48
  • 1
    +1 for a style that I invented in the nineties. ;) I'm sure I wasn't the first one to do it (and I didn't use the slashes because there was no XHTML back then) but it was a routine way of writing HTML in days when I had a lot of images that had to be perfectly aligned with no gaps. :) I still sometimes do it because I don't like having text nodes where there shouldn't be any and I don't think CSS is good for removing things from the DOM that shouldn't be there in the first place. Having whitespace written in a 0px font is not the same - it's like 1px transparent GIFs - but backwords.
    – rsp
    Jul 29, 2014 at 12:40
  • Rolled back to the original answer because this weird formatting was the actual solution. Oct 20, 2016 at 7:47
  • I've downvoted because there are better solutions now. Stackoverflow is meant to evolve :) Nov 23, 2021 at 20:15
19

.no-whitespace {
  line-height: 0;
  font-size: 0;
}
<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>

4
  • 2
    While this has the potential to "cancel" out nested font sizes, this is my favorite solution.
    – Josh Mouch
    Feb 28, 2013 at 20:09
  • 15
    not good. Those properties are inherited...
    – brunoais
    Apr 30, 2013 at 17:27
  • 1
    @brunoais Yes, the only caveat of this technique is that you have to explicitly reset the font-size on child elements. Jun 16, 2014 at 19:04
  • 1) This does not work with Safari. 2) If you are not using px to define your site which now days is more likely than not), this can really mess up the content. Jun 6, 2016 at 22:08
18
<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

OK, I might be lucky in that I only have to worry right now about getting this to work in webkit (specifically the one embedded in QT) so it works in Chrome and Safari too. Seems display: table-cell has all the benefits of display: inline-block, but without the whitespace drawback (think indented td's)

3
  • 4
    One thing you can do with inline-block that you can't do with table-cell: align all the elements to the right or center by setting text-align on the parent. Jun 16, 2014 at 19:01
  • Best option for legitimacy. Not supported in IE<7. Any way, you can use style conditionals for IE.
    – Justo
    Jul 11, 2014 at 1:21
  • According to caniuse.com/#search=table-cell it can be used in all browsers except IE 6+7. So it should work in IE8 as well. Aug 10, 2016 at 13:23
7

Images are per default inline elements, that’s why you see whitespace between them. If you listen to your example in a screen reader, you immediately know why: without whitespace, you’d hear:

my mini thingmy mini thingmy mini thingmy mini thing

So, use my mini thing. (dot plus whitespace at the end) as alt text or push the images with CSS together. Do not just remove the whitespace in the code.

3
  • Where did you get the idea that image is some sort of blank, and alt is the method of filling it in to make a grammatically and punctually correct sentence, rather than alt being a short description of the image? Aug 25, 2010 at 19:07
  • 1
    By listening in JAWS and browsing without images.
    – fuxia
    Aug 25, 2010 at 22:39
  • 1
    Interesting insight. I think this underlines the true cause to this problem: Images are default inline. If you don't use images as inline elements, make sure to declare them as something blocky. Jul 1, 2014 at 12:13
3

If you're using php, this works wonderfully. I found the solution here.

I was originally looking for something to remove text nodes consisting of only whitespace after parsing html with something like simplexml, but this is much cheaper.

<?ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});?>
    <img src='./mlp.png'/>
    <img src='./dbz.png'/>
    <img src='./b10af.png'/>
    <img src='./fma.png'/>
<?ob_end_flush;?>
2

This is a simple question and the answer is not so simple.

One can try to avoid the spaces in the source code which is not always achievable in CMS, because there they are automatically inserted by the system. If you want to change this you have to dig deep inte the CMS's core code.

Then you can try to use left floated images. But this is dangerous. At first you don't really have a control over vertical-alignment by definition. And secondly, you run into total chaos if you have so many floated elements, that they stretch over more than one line. And if you have a layout that relies on left floated elements (most of them do so today) you can even break some outer floating styles, if you clear floating after the images. This can be overridden, if you float any surrounding element. Rather not to be recommended.

So the only solution would be a CSS declaration that handles the process of whitespace handling. This is not part of any standard (as CSS 3 is not yet finished).

I prefer the no whitespace in HTML variant. With using drupal as CMS this can be achieved rather easy in your template.php and theming files. Then I choose inline-block.

P.S.: inline-block is rather complicated to get in the different browsers. For FF 2 you need display: -moz-inline-box. The rest and IE8 can have display: inline-block right after. And for lte IE 7 you need display: inline in a following separate declaration (preferrably via conditional comments).

edit

What I use for making a element inline-block

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
1

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 &nbsp;), you always remove the spaces in the minification process.

9
  • 1
    Actually, maybe you're right about minifying the HTML. +1. (I can't understand what @Evan is talking about) Aug 23, 2012 at 0:17
  • 4
    I think that good minifier should (by definition) not introduce semantic changes to the document through the process of minification. So if your minifier currently removes whitespace, watch out when they "fix" that bug.
    – hasen
    May 21, 2013 at 6:28
  • 1
    I agree that it should not make semantic changes. Yes. May 21, 2013 at 7:09
  • 4
    A smart minifier should not remove the spaces in this case because they might be desirable in some cases when using inline-block. Jun 16, 2014 at 19:03
  • 1
    But it should remove newline characters because they are not rendered faithfully.
    – Cool Blue
    Sep 13, 2014 at 11:27
1

Try this CSS:

img { display: table-cell; }
1
  • 3
    This did nothing in my case, but using display: table on the parent element worked in Chrome 44. Sep 1, 2015 at 15:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.