Question

我有这个简单的HTML - 三个span元素，每个元素都包含一个文本元素：

HTML

<span>5</span>
<span>,</span>
<span>000</span>

正如您在此处所看到的，5和,元素之间存在空格，尽管填充和边距等于零。这可能是由于字体容器边距或类似的东西。如何删除这些空格？

修改谢谢大家。一个重要的说明 - 使用jQuery的追加方法添加span项目，所以我无法将它们放在一行中

Answer 1

像这样：

<span>5</span><span>,</span><span>000</span>

如果你不想要（印刷）空格，那就不要写空格！

那就是说，我很欣赏这并不总是令人满意的，特别是在编写更复杂的结构时。在这种情况下，您可以（并且通常应该）在将HTML发送到浏览器之前将其缩小 - 个人而言，我将所有换行符和标签都删除为“不必要”（如果我真的想要一个空格，我手动输入一个），这样就可以了很好。

Answer 2

您可以使用float或font-size阻止渲染的空格。无需为跨度更改HTML，但必须使用父元素。

检查我的codepen：http://codepen.io/benmb1984/pen/NxLyvN

HTML

<div class="float">
  <span>5</span>
  <span>,</span>
  <span>000</span>
</div>

<div class="fontsize">
  <span>5</span>
  <span>,</span>
  <span>000</span>
</div>

CSS

/* Float method */
.float {
  overflow: hidden /* Or any other method to clear float */;
}

.float span {
  float: left;
}

/* Font size method */
.fontsize {
  font-size: 0;
}

.fontsize span {
  font-size: 1rem;
}

Answer 3

习惯了这个

<span>5</span><span>,</span><span>000</span>

<强> Demo

第二个选项尝试此

<span>5</span><!--
--><span>,</span><!--
--><span>000</span>

<强> Demo2

Answer 4

尝试删除代码之间的任何空格：

<span>5</span><span>,</span><span>000</span>

Answer 5

Spans是内联包装器，内联元素留下空白区域。你可以试试这个

<span>5</span><!--
--><span>,</span><!--
--><span>000</span>

或者你可以在一行中完成

<span>5</span><span>,</span><span>000</span>

Fiddle

删除文字和标点符号之间的空格

5 个答案:

HTML

CSS