我不太确定你是否想要创建两个没有间隙的蓝色跨度，或者想要处理其他空白，但如果你想删除间隙:

span {
    display: inline-block;
    width: 100px;
    background: blue;
    font-size: 30px;
    color: white;
    text-align: center;

    float: left;
}

和完成。

2021的解决方案

不幸的是，空白折叠仍然没有实现。

同时，给父元素font-size: 0;然后设置子字体的字体大小。这应该能奏效

所以有很多复杂的答案。我能想到的最简单的方法是只给其中一个元素一个负边距(根据元素的位置，可以是左边距或右边距)。

添加字母间距:4 px;在父CSS上添加letter-spacing:0px;到生成空间css。

跨度{ 显示:inline-block; 宽度:100 px; 背景颜色:浅紫红; vertical-align:底部; 字母间距:0 px; ｝ p { 字母间距:4 px; ｝ < p > <span> Foo </span> <span> Bar </span> < / p >

p { 显示:flex; ｝ 跨度{ 浮:左; 显示:inline-block; 宽度:100 px; 背景:红色; 字体大小:30 px; 颜色:白色; ｝ < p > <span> hello </span> <span> world </span> < / p >

今天，我们应该只使用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>