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

Question

I have a list of spans. It is convenient to place these <span> tags in different lines in the HTML file 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, they create space between these <span> tags. I am wondering if there is any CSS or another way to remove this space between two <span> tags without putting all the overlying spacing on the same line without any spacing between them?

Please note that we assume that the above html structure cannot be modified.

Thank you and welcome.

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

After reading the dfsq solution and other related posts, I feel that there is no perfect answer. It really depends on the specific need . The dfsq solution is smart and should work, but complicate the situation.

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

• Use CSS to deploy span

• Add additional space as follows: <span><a href="some link">A link</a>&nbsp;</span>

Hope this helps.

Answer 1

I usually set the font-size parent container to zero, which leads to the disappearance of spaces that cause spaces. Then you just need to set the font size to the required 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/

Answer 2

This may or may not work for your situation, but you can use elements such as <li> and <dl><dt><dd> , which have an optional closing tag. The browser adds an end tag for you, and also has the effect of removing a space!

Link - HTML: Include or Exclude Extra Closing Tags?

Check out this script http://jsfiddle.net/by0sw7kc/

HTML

 <ul> <li><a href="some link">A link</a> <li><a href="some link">A link</a> <li><a href="some link">A link</a> <li><a href="some link">A link</a> <li><a href="some link">A link</a> </ul> 

CSS

 ul { background: red; padding-left: 0; } li { background: deepSkyBlue; display: inline-block; } 

Answer 3

Try writing all your span in a line as shown below.

 <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> 

Answer 4

Although a solution suggesting resizing the parent font is a better solution , this is what I found to help:

 <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> 

Explanation: remove the white space between the open and close span sibling element tags

Answer 5

You can remove the registration from indents and fields from all spaces that I would recommend adding to these spaces if you DO NOT want to do them with everyone else on your site.

span {padding: 0; margin: 0;}

with class

span.className {padding: 0; margin: 0;}

Answer 6

Try

 .container span { margin-left:-3px; }