block; how to remove white space

I found this question How do I get rid of white spaces between spans without manipulating the 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?

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>

---

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:

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

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

*{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:

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

---

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

---

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

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

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

// Then Calling it

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

链接地址: http://www.djcxy.com/p/15788.html

上一篇: 需要在内联元素之间插入空格

下一篇: 块; 如何删除空白