这些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 nav { 字体大小:0; } 导航a { 字体大小:16 px; } 消极的保证金 Div a { 显示:inline-block; margin-right: 4 px; } 跳过结束标签 < ul > <李>一 <李>两个 <李>三 < / ul > 使用注释: < ul > <李>第1项李< / > < !-- 李——> < >第二项李< / > < !-- 李- > < > 3项李< / > < / ul >

其他回答

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

通常我们在不同的行中使用这样的元素,但在display:在同一行中使用标签的内联块将删除空格,但在不同的行中则不会。

在不同的行中有标签的例子:

P跨度{ 显示:inline-block; 背景:红色; } < p > <span> Foo </span> <span> Bar </span> < / p >

标签在同一行的示例

P跨度{ 显示:inline-block; 背景:红色; } < p > <span> Foo </span><span> Bar </span> < / p >


另一种有效的方法是CSS作业,对父元素使用font-size:0,并根据需要给子元素赋予font-size。

p { 字体大小:0; } P跨度{ 显示:inline-block; 背景:红色; 字体大小:14 px; } < p > <span> Foo </span> <span> Bar </span> < / p >

上述方法可能在某些地方不起作用,这取决于整个应用程序,但最后一种方法是这种情况的万无一失的解决方案,可以在任何地方使用。

我最近一直在解决这个问题,而不是设置父字体大小:0,然后将子设置回一个合理的值,我已经通过设置父容器字母间距:-得到一致的结果。25em然后孩子回到字母间距:正常。

在另一个帖子中,我看到一位评论者提到,font-size:0并不总是理想的,因为人们可以在浏览器中控制最小字体大小,完全否定了将字体大小设置为0的可能性。

无论指定的字体大小是100%、15pt还是36px,使用ems都可以正常工作。

http://cdpn.io/dKIjo

这个问题最简单的答案是相加。

css

float: left;

代码依赖链接:http://jsfiddle.net/dGHFV/3560/

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