HTML: Removing spaces between inline-block elements

Given this HTML:

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

and this CSS:

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

as a result, there will be a 4px wide space between the SPAN elements. Demo: http://jsfiddle.net/dGHFV/

I understand why this happens, and I also know that I could get rid of that space by removing the white-space between the SPAN elements in the HTML source code, like so:

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

However, I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with.

I know how to solve this with JavaScript - by removing the Text nodes from the container element (the paragraph), like so:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

Answer:

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

Let's not forget the actual question that was asked:

How to remove the space between inline-block elements? I was hoping for a CSS solution that doesn't require the HTML source code to be tampered with. Can this issue be solved with CSS alone?

It is possible to solve this problem with CSS alone, but there are no completely robust CSS fixes.

The solution I had in my initial answer was to add font-size: 0 to the parent element, and then declare a sensible font-size on the children.

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

This works in recent versions of all modern browsers. It works in IE8. It does not work in Safari 5, but it does work in Safari 6. Safari 5 is nearly a dead browser (1.49%, July 2013).

Most of the possible issues with relative font sizes are not complicated to fix.

However, while this is a reasonable solution if you specifically need a CSS only fix, it's not what I recommend if you're free to change your HTML (as most of us are).

This is what I, as a reasonably experienced web developer, actually do to solve this problem:

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

Yes, that's right. I remove the whitespace in the HTML between the inline-block elements.

It's easy. It's simple. It works everywhere. It's the pragmatic solution.

You do sometimes have to carefully consider where whitespace will come from. Will appending another element with jQuery add whitespace? No, not if you do it properly.

Let's go on a magical journey of different ways to remove the whitespace, with some new HTML:

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

You can do this, as I usually do:

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

</ul>

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

Or, 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, you can even skip certain closing tags entirely (all browsers are fine with this):

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

Now that I've gone and bored you to death with "one thousand different ways to remove whitespace, by thirtydot", hopefully you've forgotten all about font-size: 0.

Read More