Question

我发现了这个问题How do I get rid of white spaces between spans without manipulating the HTML?

其中，第二个回答（谈论white-space:collapse;和white-space-collapse: discard;）会很好。现在答案已经快两年了，white-space:collapse;似乎仍然没有效果。

有没有办法在不使用<span>的情况下从float:left;移除空格而不在一行上写下所有<span>？

Here is a fiddle with the spans and the white space

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

第五解决方案：
该解决方案是简单地关闭＆gt;在下一个标记的开头旁边：

<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并为跨度设置字体大小。这是 updated fiddle

Answer 3

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

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

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

下面的行上

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

DEMO http://jsfiddle.net/ce82e/16/

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

// Then Calling it

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

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

3 个答案: