在CSS中有一个简单的解决方案。例如:

HTML

<p class="parent">
    <span class="children"> Foo </span>
    <span class="children"> Bar </span>
</p>

CSS

.parent {
    letter-spacing: -.31em;
    *letter-spacing: normal;
    *word-spacing: -.43em;
}
.children {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
}

在我看来，在像em这样的项目中使用font-size: 0是不安全的，所以我更喜欢purecss的解决方案。

你可以在这个链接中检查这个框架。享受:)

.row { letter-spacing: -.31em; *letter-spacing: normal; *word-spacing: -.43em; /* For better view */ background: #f9f9f9; padding: 1em .5em; } .col { display: inline-block; *display: inline; zoom: 1; letter-spacing: normal; word-spacing: normal; /* For better view */ padding: 16px; background: #dbdbdb; border: 3px #bdbdbd solid; box-sizing: border-box; width: 25%; } <div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> </div>

另外两个基于CSS文本模块Level 3的选项(而不是从规范草案中删除的空格崩溃:discard):

词间距:-100%;

从理论上讲，它应该做的正是所需要的——缩短空白 'words'之间由空格字符宽度的100%，即到 零。但不幸的是，似乎在任何地方都行不通，还有这个 特性被标记为“处于危险中”(它也可以从规范中删除)。

词间距:1 ch;

它将字间距缩短为数字“0”的宽度。在单空格字体中，它应该完全等于空格字符的宽度(以及任何其他字符)。这适用于Firefox 10+， Chrome 27+，几乎适用于Internet Explorer 9+。

小提琴

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

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

p {
  text-space-collapse: discard;
}

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

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

使用其中一个技巧

删除空格 消极的保证金 跳过结束标签(HTML5不在乎) 将字体大小设置为0(字体大小为0的空格是…零宽度) 使用flexbox

请看下面的代码:

body { font-family: sans-serif; font-size: 16px; } ul { list-style: none } li { background: #000; display: inline-block; padding: 4px; color: #fff; } ul.white-space-fix li { margin-right: -4px; } ul.zero-size { font-size: 0px; } ul.zero-size li { font-size: 16px; } ul.flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } original... <ul> <li>one</li> <li>two</li> <li>three</li> </ul> Funky code formatting... <ul> <li> one</li><li> two</li><li> three</li> </ul> Adding html comments... <ul> <li>one</li><!-- --><li>two</li><!-- --><li>three</li> </ul> CSS margin-right: -4px; <ul class="white-space-fix"> <li>one</li> <li>two</li> <li>three</li> </ul> Omitting the &lt;/li&gt; <ul> <li>one <li>two <li>three </ul> fixed with font-size: 0 <br><br> <ul class="zero-size"> <li>one</li> <li>two</li> <li>three</li> </ul> <br> flexbox <br> <ul class="flexbox"> <li>one</li> <li>two</li> <li>three</li> </ul>

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