How to remove the space between two tags? [

Question

This question already has answers here:

How do I remove the space between inline-block elements? (39 answers)

Closed 5 years ago.

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/

Answer 2

You can remove padding from padding and margin from all the spans I would recommend adding a class to these spans in case you DO NOT want to do them to all others throughout your site.

span {padding:0;margin:0;}

with class

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

Answer 3

Try

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

Answer 4

Try to write all your span in inline 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>

Answer 5

Although the solution suggesting to change parent font size is a better solution, this is something I have 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 open and closing tags of the sibling span elements

Answer 6

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

Reference - HTML: Include, or exclude, optional closing tags?

Check this Fiddle 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;
}