跨度显示：内联块; 如何删除空白区域

Question

我发现了这个问题如何在不操纵HTML的情况下摆脱跨距之间的空白？

第二个答案（谈论white-space:collapse;以及white-space-collapse: discard; ）会很好。 现在答案已经快两年了， white-space:collapse; 仍然似乎没有工作。

有没有办法从<span>删除空格而不使用float:left; 并且没有在一行上写下所有<span> s？

这是一个跨度和白色空间的小提琴

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

我不想要的是这个：

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

Answer 1

使用内联块时出现的一个问题是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>

DEMO

第二：
最佳的空白空间解决方案是将父级的字体大小设置为0以用于内联块元素。 你这样做：

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

DEMO

第三：这个解决方案有点匪徒，但也有效。 使用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>

第四个问题：

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

Answer 2

在不更改HTML的情况下，我的最佳解决方案是为容器设置font-size:0并为跨度设置字体大小。 这是你的更新小提琴

Answer 3

我采用的一个解决方案是评论空白

演示http://jsfiddle.net/ce82e/2/

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

另一个解决方案，就是让您知道您的选择，是将结束标记放在下面的行上

演示http://jsfiddle.net/ce82e/9/

<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>
<div class="col">
           <span class="field green">
    </span><span class="field green">
    </span><span class="field green">
    </span><span class="field green">
    </span><span class="field green">
    </span><span class="field green">
    </span><span class="field green">
    </span><span class="field green">
    </span><span class="field green"></span>
</div>

一个JavaScript解决方案将是

演示http://jsfiddle.net/ce82e/16/

$.fn.removeSpace = function(){ 
  $(this).contents().filter(function() {
    return this.nodeType === 3; 
  }).remove();
};

// Then Calling it

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