How to remove the space between two <span> tags? [duplicate]

Question

I have a list of spans. In the HTML file, it is nice to list these <span> tags in different lines for readability and maintenance as follows:

<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>
<span><a href="some link">A link</a></span>

However, these create a space between these <span> tags. I am wondering if there is any CSS or other way to remove this space between two <span> tags without putting all above spans in one line without any space in between?

Note that we assume that the above html structure cannot change.

Thanks and regards.

-------- UPDATE ------------

After reading dfsq's solution and other related posts, I feel there is no perfect answer. It really depends on the specific need. dfsq's solution is clever and should work but get things over complicated.

What I have regarding the specific need is having a border between two spans and the space between the border and span should be the same. For my particular need, I found the two acceptable solutions too:

1. Use CSS to float span

2. Add an extra space as follows: <span><a href="some link">A link</a>&nbsp;</span>

Hope this helps.

Answer 1

I usually set font-size of the parent container to zero, which makes white spaces causing gaps to disappear. You then just need to set font-size back to necessary value for spans, for example:

.container {
    font-size: 0;     // whitespaces go away
}
.container span {
    font-size: 16px;  // spans text please stay
    background: #DDD;
    padding: 2px 4px;
}

Demo: http://jsfiddle.net/we9bvrpe/