How to eliminate white space between inline/inline-block elements?

Question

There will be a 4-pixel wide space between these span elements:

span {
  display: inline-block;
  width: 100px;
  background-color: palevioletred;
}

<p>
  <span> Foo </span>
  <span> Bar </span>
</p>

Fiddle Demo

I know I can remove this space by removing the space between the span elements in the HTML:

<p>
  <span> Foo </span><span> Bar </span>
</p>

I'm looking for a CSS solution that doesn't involve:

• Modify HTML.
• Use JavaScript.

Answer 1

For browsers that comply with the CSS3 standard, you can use the white-space-collapsing:discardattribute

See: http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

Answer 2

Alternatively, you can use flexbox to achieve many of the layouts you might have previously achieved using inline-block: https://css-tricks.com/snippets/css/a-guide-to -flexbox/

---

Since this answer has become quite popular, I'm rewriting it.

Let us not forget the actual question asked:

This problem can be solved using just CSS, but there is no completely stable CSS fix.

The solution I proposed in my original answer was to add font-size: 0 to the parent element and then declare a reasonable font-size in the child element.

http://jsfiddle.net/thirtydot/dGHFV/1361/

This works in the latest versions of all modern browsers. It works in IE8. It doesn't work in Safari 5, but works in Safari 6. Safari 5 is almost a dead browser (0.33%, August 2015).

Most issues related to relative font sizes are not complicated.

However, if you are free to change the HTML (most people are), this is a reasonable solution, but not one I would recommend.

---

As an experienced web developer, this is how I actually solved this problem:

<p>
    <span>Foo</span><span>Bar</span>
</p>

Yes, that's it. I removed the spaces in the HTML between inline block elements.

It's easy. this is very simple. It works everywhere. This is a pragmatic solution.

You sometimes have to think carefully about the source of whitespace. Will spaces be added if I append another element using JavaScript? No, if you do it correctly.

Let's take a magical journey and learn about some different ways to remove spaces, using some new HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

• You can do what I usually do:

  <ul>
       <li>Item 1</li><li>Item 2</li><li>Item 3</li>
   </ul>

http://jsfiddle.net/thirtydot/dGHFV/1362/

• Or, do this:

  <ul>
       <li>Item 1</li
       ><li>Item 2</li
       ><li>Item 3</li>
   </ul>

• Or, use comments:

  <ul>
       <li>Item 1</li><!--
       --><li>Item 2</li><!--
       --><li>Item 3</li>
   </ul>

• Or if you use PHP or something similar:

  <ul>
       <li>Item 1</li><?
       ?><li>Item 2</li><?
       ?><li>Item 3</li>
   </ul>

• Alternatively, you can even omit certain closing tags entirely (supported by all browsers):

  <ul>
       <li>Item 1
       <li>Item 2
       <li>Item 3
   </ul>

Now that I've bored you with "thirtydot's thousand different ways to remove spaces", I hope you've forgotten font-size: 0.