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

Answer 1

Try

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

Answer 2

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 3

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 4

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

Answer 5

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 6

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