如何去除两个<span>标签之间的空格？

Question

我有一份span元素列表。在HTML文件中，为了易读性和维护性，将这些<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>

然而，这些标签之间会创建一个空格。我想知道是否有任何 CSS 或其他方法可以在两个 <span> 标签之间移除空格，而不需要将所有上面的 span 放在同一行中且没有空格？请注意，我们假设上述 HTML 结构不能更改。谢谢和问候。

-------- 更新 ------------

阅读 dfsq 的解决方案和其他相关帖子后，我觉得没有完美的答案。它确实取决于具体需求。dfsq 的解决方案聪明且应该可行，但是过于复杂。对于我的特定需求，我也发现了两个可接受的解决方案：

1. 使用 CSS 浮动 span。 2. 添加额外的空格，如下所示：<span><a href="some link">A link</a>&nbsp;</span> 希望这有所帮助。

- curious1

---

你知道在HTML中换行符被视为空格吗？ - Lee

将父级元素的font-size设为0，将span元素的font-size设置为您想要的大小。这样就可以解决问题。 - Ruddy

我推荐阅读我上面链接的问题，里面有一些非常详细的答案。 - Woodrow Barlow

是的，没有完美的解决方案。未来应该会有纯CSS机制来控制空白间距的行为，但目前还没有。 - dfsq

dfsq，谢谢你的信息。很好知道。干杯！ - curious1

Answer 1

我通常将父容器的font-size设置为零，这样可以消除空格造成的间隙。 然后你只需要为等元素重新设置必要的字体大小即可：

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

示例：http://jsfiddle.net/we9bvrpe/

- dfsq

---

我很好奇，我还看到一些空格在那里，希望我没有夜盲症。 - Benjamin

使用最新版的Chrome浏览器 - Benjamin

@Benjamin 你确定你不是看到了填充区域，然后认为它们是空格吗？（我正在使用最新的Chrome浏览器，一切正常） - Ruddy

@Benjamin 想到了，可能就是这个原因 :) - Ruddy

@Ruddy，是的，那很尴尬。 - Benjamin

Answer 2

尽管建议更改父级字体大小的解决方案更好，但我发现以下内容可以帮助：

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

解释：移除同级 span 元素的开闭标签之间的空格。

- Brett Weber

---

请解释一下为什么要踩这个回答。这是一个有效且恰当的回答。 - Brett Weber

点赞。这实际上是一个相当不错的替代方案。如果您有严格的格式规则，可能不太适合，但它能很好地达到目的。 - valignatev

Answer 3

尝试将所有的 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>

- Benjamin

---

类似于 Dan 的回答，虽然这是一个有效的解决方案，但是 OP 要求在不将所有“span”放在同一行的情况下完成此操作。 - Hidden Hobbes

我在这里没有看到这样的答案。 - Benjamin

那可能是因为丹删除了它 ;) - Hidden Hobbes

那么你也想删除我的回答。 - Benjamin

不一定，只是注意到虽然这样可以工作，但OP要求另一种解决问题的方法。 - Hidden Hobbes

太好了。感觉很舒适。 - Benjamin

Answer 4

这可能适用于您的情况，但您可以使用像<li>和<dl><dt><dd>这样的元素，它们有一个可选的闭合标签。浏览器会为您添加闭合标签，并具有删除空格的效果！参考 - HTML：包括或排除可选的闭合标签？请查看此Fiddlehttp://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;
}

- Michael

---

Michael，谢谢你的参与。我明白你的解决方案也应该有效。我只是不想改变HTML结构。我还添加了一个关于其他解决方案的更新。 - curious1

Answer 5

您可以从所有span中删除填充和边距，我建议为这些span添加类，以防您不想对整个站点进行更改。 {padding:0;margin:0;}

使用类：

{padding:0;margin:0;}

- pcproff

---

这不会起作用，你应该在回答之前先尝试。 - Benjamin

你好 @pcproff。如果你的回答没有被接受，你可以删除整个回答，失去的评分将会恢复，就好像你没有回答一样。有时候修正已经被负面投票的回答是很困难的，所以这可能是一个更好的解决方案给你。 - Atiris

Answer 6

尝试

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

- Paramasivan

---

给所有段落添加负边距是一个糟糕的设计决策。即使有条件地这样做也是一个糟糕的设计决策。这并不能解决问题，而只是试图通过一种可能在所有浏览器上都无法工作的黑客手段来隐藏它。 - Brett Weber