spaces between inline-block elements generating undesirable spaces between nodes

Question

Often, i will have markup that looks like this

<span>some text</span>
<span>some other stuff</span>

The spans are inline-block. The newline between them generates a space, which shows up visually as a small gap between the elements. The only solution i found is to remove the newlines, which makes the markup look bad.

are there any other solutions?

Answer 1

What about wrapping them in a <div id="lineSpan"> where you float: left.

#lineSpan span { 
    float: left;
    display: block;
    overflow: hidden;
}

I never like display inline or inline-block. The results are unexpected.