如何删除两个 标签之间的空格？ [复制]答案

【问题标题】：How to remove the space between two tags? [duplicate]如何删除两个 标签之间的空格？ [复制]
【发布时间】：2014-09-05 01:37:18
【问题描述】：

我有一个跨度列表。在 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 结构不能改变。

感谢和问候。

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

看了dfsq的解决方案等相关帖子，感觉没有完美的答案。这真的取决于具体的需要。 dfsq 的解决方案很聪明，应该可以工作，但会使事情变得复杂。

我对特定需求的了解是在两个跨度之间有一个边界，并且边界和跨度之间的空间应该是相同的。对于我的特殊需要，我也找到了两种可接受的解决方案：

使用 CSS 浮动跨度
添加一个额外的空格如下：<a href="some link">A link</a>&nbsp;

希望这会有所帮助。

【问题讨论】：

你知道换行符在 HTML 中算作空格吗？
将父 font-size: 0; 和 span font-size 设置为您想要的。这将解决它。
我上面链接的问题有一些非常彻底的答案，我建议阅读这些。
是的，没有完美的解决方案。未来应该有纯 CSS 机制来控制空白行为，但目前还没有。
dfsq，感谢您提供的信息。很高兴知道。干杯！

标签： html css whitespace

【解决方案1】：

我通常将父容器的font-size 设置为零，这会使空格导致间隙消失。然后，您只需将 font-size 设置回 span 的必要值，例如：

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

【讨论】：

+1 因为你做得这么聪明。
我还是很好奇，我看到周围有一些空间希望我没有夜盲症
@Benjamin 有意思，是什么浏览器？
使用最新的chrome
@Benjamin 你确定你不只是看到填充并考虑它的空白吗？（我正在使用最新的 Chrome 和它的罚款）

【解决方案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>

说明：删除同级 span 元素的开始标签和结束标签之间的空白

【讨论】：

请解释否决票。这是一个有效且适当的答案。
赞成。这实际上是一个很好的替代解决方案。当您有严格的格式规则时可能不适合，但它可以很好地达到目的。

【解决方案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;
}

【讨论】：

Michael，感谢您的参与。我知道您的解决方案也应该有效。我只是不想更改 html 结构。我还添加了有关其他解决方案的更新。

【解决方案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>

【讨论】：

与 Dan 的回答类似，虽然这是一个有效的答案，但 OP 要求提供一种方法来做到这一点，而无需将所有 spans 放在一条线上。
我在这里没有看到这样的答案。
那是因为 Dan 删除了他的 ;)
所以你也想删除ma答案。
不一定，只是注意到虽然这确实有效，但 OP 要求另一种解决问题的方法。

【解决方案5】：

您可以从所有 span 的 padding 和 margin 中删除 padding，我建议向这些 span 添加一个类，以防您不想对整个站点的所有其他人这样做。

span {padding:0;margin:0;}

类

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

【讨论】：

这不起作用应该在你回答之前尝试

【解决方案6】：

试试

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

【讨论】：

为所有跨度添加负边距是一个糟糕的设计决策。即使有条件地这样做也是一个糟糕的设计决策。这并不能解决问题，它会尝试通过可能无法在所有浏览器上运行的 hack 来隐藏它