How to remove the space between inline/inline-block elements?

by

Given this HTML and CSS:

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}
<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

As a result, there will be a 4 pixel 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();

Demo: http://jsfiddle.net/dGHFV/1/

But can this issue be solved with CSS alone?

4
41

Leave a Comment