如何删除内联/内联块元素之间的空格？

Question

给定这个HTML和CSS:

null

span {
    display:inline-block;
    width:100px;
    background-color:palevioletred;
}

<p>
    <span> Foo </span>
    <span> Bar </span>
</p>

null

因此，跨度元素之间将有4 ；像素宽的空间。

演示:http://jsfiddle.net/dghfv/

我理解为什么会发生这种情况，我也知道可以通过删除HTML源代码中SPAN元素之间的空白来消除这种空格，如下所示:

<p>
    <span> Foo </span><span> Bar </span>
</p>

然而，我希望CSS解决方案不需要篡改HTML源代码。

我知道如何用JavaScript解决这个问题--从container元素（段落）中删除文本节点，如下所示:

// jQuery
$('p').contents().filter(function() { return this.nodeType === 3; }).remove();

演示:http://jsfiddle.net/dghfv/1/

但是，这个问题能单独用CSS解决吗？

Answer 1

编辑:

今天，我们应该只使用Flexbox。

老答案:

好的，虽然我对font-size:0；和Not implemented CSS3 Feature的答案都投了赞成票，但在尝试之后我发现它们都不是真正的解决方案。

实际上，没有一个没有强烈副作用的变通方法。

然后，我决定从HTML源(JSP)中删除内联块div之间的空格（这是关于这个参数的答案），将其转换为:

<div class="inlineBlock">
    I'm an inline-block div
</div>
<div class="inlineBlock">
    I'm an inline-block div
</div>

对此

<div class="inlineBlock">
    I'm an inline-block div
</div><div class="inlineBlock">
    I'm an inline-block div
</div>

这很难看，但很管用。

但是，等一下。。。 如果我在taglibs循环(struts2，jstl等）内生成div，该怎么办 ？

例如:

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour">
        <s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}">
            <div class="inlineBlock>
                I'm an inline-block div in a matrix 
                (Do something here with the pushed object...)
           </div>
       </s:push>
    </s:iterator>
</s:iterator>

这是绝对不能想象的内联所有东西，这将意味着

<s:iterator begin="0" end="6" status="ctrDay">
    <br/>
    <s:iterator begin="0" end="23" status="ctrHour"><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div></s:push></s:iterator>
</s:iterator>

难懂的，难懂的，难懂的等等。

我找到的解决办法是:

使用HTML注释将一个div的结尾连接到下一个div的开头！

<s:iterator begin="0" end="6" status="ctrDay">
   <br/>
   <s:iterator begin="0" end="23" status="ctrHour"><!--
    --><s:push value="%{days[#ctrDay.index].hours[#ctrHour.index]}"><!--
        --><div class="inlineBlock>
                I'm an inline-block div in a matrix             
                (Do something here with the pushed object...)
           </div><!--
    --></s:push><!--
--></s:iterator>
</s:iterator>

这样，您将获得一个可读的，正确缩进的代码。

而且，作为一个积极的副作用，HTML源代码虽然充斥着空注释，但将正确地缩进；

让我们举第一个例子。 依我拙见，这:

    <div class="inlineBlock">
        I'm an inline-block div
    </div><!--
 --><div class="inlineBlock">
        I'm an inline-block div
    </div>

比这更好:

    <div class="inlineBlock">
         I'm an inline-block div
    </div><div class="inlineBlock">
         I'm an inline-block div
    </div>

Answer 2

对于符合CSS3的浏览器，有white-space-collapsing:discard

见:http://www.w3.org/tr/2010/wd-css3-text-20101005/#white-space-collapsing

Answer 3

因为这个答案已经变得相当流行，所以我对它进行了重大的重写。

让我们不要忘记所提出的实际问题:

如何移除内联块元素之间的空格？ 我希望有一个CSS解决方案，它不需要篡改HTML源代码。 这个问题能单独用CSS解决吗？

单独使用CSS解决这个问题是可能的，但是没有完全健壮的CSS修补程序。

我在最初的回答中得到的解决方案是将font-size:0添加到父元素，然后在子元素上声明一个合理的font-size。

http://jsfiddle.net/thirtydot/dghfv/1361/

这在所有现代浏览器的最新版本中都是有效的。 它在IE8下工作。 它在Safari5中不起作用，但在Safari6中起作用。 Safari5几乎是一个死掉的浏览器（0.33%，2015年8月）。

与相对字体大小有关的大多数可能的问题并不复杂修复。

然而，虽然这是一个合理的解决方案，如果您特别需要一个CSS仅修复，但如果您可以自由地更改您的HTML（就像我们大多数人一样），这不是我推荐的。

这就是我，作为一个相当有经验的web开发人员，实际为解决这个问题所做的:

<p>
    <span>Foo</span><span>Bar</span>
</p>

是的，没错。 我删除了HTML中内联块元素之间的空白。

很简单。 很简单。 到处都管用。 这是务实的解决方案。

您有时确实需要仔细考虑空格的来源。 用JavaScript附加另一个元素会添加空格吗？ 不，如果你做得好就不会。

让我们开始一段神奇的旅程，用一些新的HTML:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

>

您可以这样做，就像我通常做的那样:

<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

http://jsfiddle.net/thirtydot/dghfv/1362/

或者，这个:

<ul>
    <li>Item 1</li
    ><li>Item 2</li
    ><li>Item 3</li>
</ul>

或者，使用注释:

<ul>
    <li>Item 1</li><!--
    --><li>Item 2</li><!--
    --><li>Item 3</li>
</ul>

或者，如果您正在使用using PHP或类似工具:

<ul>
    <li>Item 1</li><?
    ?><li>Item 2</li><?
    ?><li>Item 3</li>
</ul>

或者，您甚至可以完全跳过某些结束标记（所有浏览器都可以这样做）:

<ul>
    <li>Item 1
    <li>Item 2
    <li>Item 3
</ul>

既然我已经去了，并且用“一千种不同的方法删除空格，由三十点”把你烦死了，希望你已经把font-size:0忘得一干二净了。

或者，您现在可以使用flexbox来实现许多您以前使用过的内联块布局:https://css-tricks.com/snippets/css/a-guide-to-flexbox/