Question

我有一份跨度列表。在HTML文件中，最好将这些标记列在不同的行中以便于阅读和维护，如下所示：

<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或其他方法来删除两个标签之间的这个空格而不将所有上面的跨度放在一行中而没有任何空格？

请注意，我们假设上述html结构无法更改。

谢谢和问候。

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

在阅读dfsq的解决方案和其他相关帖子后，我觉得没有完美的答案。它确实取决于具体需求。 dfsq的解决方案很聪明，应该可以解决问题。

我对具体需求的看法是在两个跨度之间有一个边界，边界和跨度之间的空间应该是相同的。根据我的特殊需要，我找到了两个可接受的解决方案：

使用CSS浮动范围
添加一个额外的空格，如下所示：<a href="some link">A link</a>

希望这有帮助。

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/

Answer 2

虽然the solution suggesting to change parent font size is a better solution，但我发现这是有帮助的：

<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

这可能适用于您的情况，也可能不适用，但您可以使用<li> and <dl><dt><dd>等具有可选结束标记的元素。浏览器为您添加结束标记，还具有删除空格的效果！

参考 - HTML: Include, or exclude, optional closing tags?

检查这个小提琴 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 4

尝试按内嵌所有内嵌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>

Answer 5

你可以从所有跨度的填充和边距中删除填充我建议在这些跨度中添加一个类，以防你不想对整个站点中的所有其他人进行填充。

span {padding：0; margin：0;}

与班级

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

Answer 6

尝试

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

如何删除两个<span>标记之间的空格？</span>

6 个答案:

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