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

I found this question How do I get rid of white spaces between spans without manipulating the HTML?

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

where the seccond answer (talking about white-space:collapse; and white-space-collapse: discard;) would be nice. Now that answer is almost two years old and white-space:collapse; still doesn't seem to work.

第二个回答(谈论白色空间:崩溃;以及白色空间崩溃:丢弃;)会很好。现在答案已经快两年了,白色空间:崩溃;仍然似乎没有用。

Is there a way to remove the white spaces from the <span>without using float:left; AND without writing all <span>s on one line?

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

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>

What I don't want is this:

我不想要的是这个:

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

3 个解决方案

#1

One problem that arrises when you use inline-block is that whitespace in HTML becomes visual space on screen. Gross. There are a few ways to remove that space; some of them are just as gross, one is reasonably nicer:

使用内联块时出现的一个问题是HTML中的空格成为屏幕上的可视空间。毛。有几种方法可以消除这个空间;其中一些是粗略的,一个是相当好的:

First:
The only 100% solution to this issue is to not put whitespace between those elements in the HTML source code:

第一:这个问题的唯一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

Second:
The best white-space solution is to set a font-size of 0 on the parent to the inline block elements. you'd do this:

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

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

DEMO

Third: This solution is a bit gangsta but also works. Using HTML comments as spacers between the elements works just as placing no space between elements would:

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

Fourth soution:

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

Fifth solution:
This solution is to simply place the closing > next to the start of the next tag:

第五种解决方案:此解决方案是简单地将结束位置放在下一个标记的开头旁边:

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

#2

Without changing your HTML, the best solution I have is to set font-size:0 for the container and set a font-size for the spans. Here is your updated fiddle

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

#3

One solution, that I adopt, is to comment out the whitespace

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

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>

Another solution, just so you know your options, is to put the closing tag on the line below

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

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>

A javascript solution would be

一个JavaScript解决方案将是

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

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

// Then Calling it

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