这些span元素之间将有一个4像素宽的空间:

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; } < p > <span> Foo </span> <span> Bar </span> < / p >

小提琴演示

我知道我可以通过删除HTML中span元素之间的空白来摆脱这个空间:

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

我正在寻找一个CSS解决方案,不涉及:

修改HTML。 JavaScript。


当前回答

字体大小:0;管理起来可能有点棘手…

我认为下面的几行代码比其他任何方法都更好,更可重用,更节省时间。我个人使用这个:

.inline-block-wrapper>.inline-block-wrapper,
.inline-block-wrapper{letter-spacing: -4px;}
.inline-block-wrapper>*{letter-spacing: 0;display: inline-block;}

/* OR better shorter name...*/
.items>.items,
.items{letter-spacing: -4px;}
.items>*{letter-spacing: 0;display: inline-block;}

那么你可以这样使用它…

<ul class="items">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
</ul>

据我所知(我可能错了),但所有浏览器都支持这个方法。

解释:

这工作(也许-3px可能更好)完全按照您的预期工作。

复制并粘贴代码(一次) 然后在HTML中,只需在每个内联块的父类上使用class="items"。

您将不需要回到css,并为您的新内联块添加另一个css规则。

同时解决两个问题。

还要注意>(大于号),这意味着*/all子元素应该是内联块。

http://jsfiddle.net/fD5u3/

注意:我已经进行了修改,以适应当包装器有子包装器时继承字母间距。

其他回答

我现在遇到了这个问题from font-size:0;我发现在ie7中这个问题仍然存在,因为ie7认为“字体大小为0?!?!”你疯了吗?”-所以,在我的情况下,我有Eric Meyer的CSS重置和字体大小:0.01em;我在ie7和Firefox 9之间有1个像素的差异,所以,我认为这是一个解决方案。

使用flexbox,并为旧浏览器做一个回退(从上面的建议):

ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

如果你正在使用Twig模板引擎,你可以使用无空格:

<p>
    {% spaceless %}
    <span>Foo</span>
    <span>Bar</span>
    {% endspaceless %}
</p>

请注意,虽然这并没有解决所提出的确切问题,但如果有人有Twig,这可能是有用的,以避免使用一些较小的解决方案。

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


旧的回答:

好吧,尽管我已经投票赞成font-size: 0;和未实现的CSS3特性的答案, 经过尝试,我发现没有一个是真正的解决方案。

实际上,没有一种解决方法没有强烈的副作用。

然后我决定从我的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>

这很难看,但很管用。

但是,等一下……如果我生成我的div在Taglibs循环(Struts2, JSTL等…)?

例如:

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

CSS Text Module Level 4规范定义了一个Text -space-collapse属性,它允许控制元素内部和周围的空白如何处理。

所以,关于你的例子,你只需要这样写:

p {
  text-space-collapse: discard;
}

不幸的是,在HBP回答的评论中提到,目前还没有浏览器实现这个属性(截至2016年9月)。