块; 如何删除空白
我发现这个问题如何在不操纵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>
使用内联块时出现的一个问题是HTML中的空白变成了屏幕上的可视空间。 毛。 有几种方法可以去除这个空间; 其中一些是粗略的，一个是相当好的：
第一：
解决此问题的唯一方法是不要在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
第二：
最好的空白解决方案是将父级的字体大小设置为内联块元素。 你会这样做：
*{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>
在不更改HTML的情况下，我的最佳解决方案是为容器设置font-size:0 ，并为跨度设置字体大小。 这是你更新的小提琴
我采用的一个解决方案是注释空白
演示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();