Html 跨度显示：内联块；如何删除空白

我发现了这个问题

第二个答案（谈论

空白：折叠；

和

空白折叠：放弃；

）会很好。现在这个答案已经有将近两年的历史了，

空白：崩溃似乎仍然不起作用

是否有一种方法可以在不使用
float:left的情况下从
中删除空格和不将所有
写入一行




我不想要的是：

<div class="col"><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span></div>

我采用的一种解决方案是注释掉空白

演示

使用内联块时出现的一个问题是HTML中的空白变成了屏幕上的可视空间。真恶心。有几种方法可以移除该空间；其中一些同样粗俗，另一个则相当不错：

第一：

此问题的唯一100%解决方案是在HTML源代码中的这些元素之间不加空格：

<div class="col"><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span></div>


第三名：
这个解决方案有点流氓，但也很有效。在元素之间使用HTML注释作为分隔符，就像在元素之间不放置空格一样：

<div class="col">
    <span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span>
</div>

第五个解决方案：

此解决方案只需将closing>放置在下一个标记的开始处：

<div class="col">
    <span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
</div>


在不更改HTML的情况下，我拥有的最佳解决方案是为容器设置
font-size:0
，并为跨距设置字体大小。
这是您的
到您的第二个解决方案，我将在
*{font size:0；}
上执行
.col{font size:0；}
。另一个解决方案是使用脚本删除父节点的所有空文本节点，但我们可能不必使用该解决方案。@KingKing这看起来怎么样？@caramba demo在这里使用纯Javascript。
$.fn.removeSpace = function(){ 
  $(this).contents().filter(function() {
    return this.nodeType === 3; 
  }).remove();
};

// Then Calling it

$('.col').removeSpace();

<div class="col"><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span><span class="field orange"></span></div>

*{margin:0;padding:0px; font-size: 0;}
.field {
    display:inline-block;
    width:20px;height:20px;
    font-size: 14px;
}

<div class="col">
    <span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span><!--
 --><span class="field orange"></span>
</div>

.field  {
    margin-left: -4px;
    display:inline-block;
    width:20px;height:20px;
    font-size: 14px;
}

<div class="col">
    <span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
    ><span class="field orange"></span
</div>