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

This question already has an answer here:

How do I remove the space between inline-block elements? 32 answers

---

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/

---

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

---

尝试按照以下方式将所有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><span><a href="some link">A link</a></span>

链接地址: http://www.djcxy.com/p/89276.html

上一篇: 奇怪的两个按钮之间的差距

下一篇: 如何去除两个<span>标签之间的空间？