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

【问题标题】：How to remove the space between inline/inline-block elements?如何删除内联/内联块元素之间的空间？
【发布时间】：2011-07-01 23:37:07
【问题描述】：

鉴于此 HTML 和 CSS：

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

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

因此，SPAN 元素之间将有 4 像素宽的空间。

演示： http://jsfiddle.net/dGHFV/

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

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

但是，我希望有一个不需要篡改 HTML 源代码的 CSS 解决方案。

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

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

演示： http://jsfiddle.net/dGHFV/1/

但是这个问题可以单独用 CSS 解决吗？

【问题讨论】：

查看我在这个问题中的回答，了解现在相关的全套选项：stackoverflow.com/questions/14630061/…
额外参考：1.davidwalsh.name/remove-whitespace-inline-block 2.css-tricks.com/fighting-the-space-between-inline-block-elements
相关：stackoverflow.com/a/59357436/104380

标签： html css

【解决方案1】：

或者，您 should now use flexbox 来实现您以前可能使用过 inline-block 的许多布局：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

由于这个答案变得相当流行，我正在重写它。

我们不要忘记提出的实际问题：

如何去除inline-block 元素之间的空格？我希望对于不需要 HTML 源代码的 CSS 解决方案篡改。 这个问题可以单独用 CSS 解决吗？

可以单独使用 CSS 解决这个问题，但没有完全强大的 CSS 修复。

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

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

这适用于所有现代浏览器的最新版本。它适用于 IE8。它在 Safari 5 中不工作，但在 Safari 6 中确实工作。Safari 5 几乎是一个死浏览器 (0.33%, August 2015)。

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

但是，如果您特别需要仅修复 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>

或者，使用 cmets：

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

或者，如果您使用的是 PHP 或类似软件：

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

或者，you can 甚至完全跳过 certain 结束标签（所有浏览器都可以这样做）：
```
 <ul>
     <li>Item 1
     <li>Item 2
     <li>Item 3
 </ul>
```

现在我已经用“一千种不同的方法来删除空格，三十点”让你厌烦至死，希望你已经忘记了所有关于 font-size: 0 的事情。

【讨论】：

它适用于FF3.6、IE9RC、O11、Ch9。但是，在 Safari 5 中仍然存在 1px 宽的差距:(
@thirtydot 你能看看this answer的评论。可能这个font-size:0 技巧毕竟不是一个好主意......
我知道发帖人正在寻找一个 CSS 解决方案，但是这个解决方案——这是迄今为止投票最多的（30 票对 5 票，当我写这篇文章时）——有很强的副作用，甚至没有跨浏览器工作。在这一点上，简单地删除 HTML 中有问题的空格更为实用。
此解决方案仅适用于您的容器尺寸不使用 EM 时
这会破坏具有相对字体大小的子元素。

【解决方案2】：

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

见：http://www.w3.org/TR/2010/WD-css3-text-20101005/#white-space-collapsing

【讨论】：

这已从文本级别 3 中删除，但文本级别 4 具有 text-space-collapse:discard。已经是 2016 年了，仍然没有支持。

【解决方案3】：

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

旧答案：

好的，尽管我对font-size: 0; 和not implemented CSS3 feature 的答案都投了赞成票，尝试后我发现它们都不是真正的解决方案。

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

然后我决定从我的HTML 源（JSP）中删除inline-block 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 loops（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 cmets 将一个 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 source，虽然被空的 cmets 感染，将导致正确缩进；

让我们举第一个例子。在我看来，这是：

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

【讨论】：

请注意，这也可能会破坏编辑器中的代码折叠功能。
在顶部使用 Flexbox 的示例将改进此答案。

【解决方案4】：

将display: flex; 添加到父元素。这是带有前缀的解决方案：

简化版?

p {
  display: flex;
}

span {
  width: 100px;
  background: tomato;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

用前缀?修复

p {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: blue;
  font-size: 30px;
  color: white;
  text-align: center;
}

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

【讨论】：

这是一个很好的答案！不过，我认为将简化版放在最上面会很整洁，这样读者就会首先看到它。或者甚至可能删除非简化版本。
@Stefnotch 完成✅感谢您的宝贵建议 :-)
例如，当 span 的内容长于一个单词时，我会遇到意外行为。以下以长列显示跨度内容，而不是“正常”流动的文本行：<div class="container"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Donec mollis nulla vel dignissim varius, aliquam tempor elit eget ante viverra ultrices</span></div> 注意：我已将 <p> 替换为容器 div - jsFiddle link is here
这对我有用，谢谢。
添加了 display:flex 到主 div 的 wordpress 菜单，这使得间距消失了

【解决方案5】：

display:inline-block 的所有空间消除技术都是令人讨厌的 hack……

使用Flexbox

太棒了，解决了所有这些内联块布局问题，并且截至 2017 年有 98% browser support（如果您不关心旧 IE，则更多）。

【讨论】：

讨厌的 hack 可能是，但是 font-size:0 可以在 100% 的浏览器上工作，并且应用 display: inline-flex 仍然没有消除额外的空白，即使在浏览器上确实支持！
@patrick Flexbox 绝对解决了这个问题，你只是做错了。 inline-flex 并不意味着内联显示弹性项目——它仅适用于容器。见stackoverflow.com/a/27459133/165673
"font-size:0" 不适用于 100% 的浏览器。（最小字体大小浏览器设置）。而且这个答案真的很好。

【解决方案6】：

在元素之间添加 cmets 使其没有空格。对我来说，这比将字体大小重置为零然后重新设置要容易。

<div>
    Element 1
</div><!--
--><div>
    Element 2
</div>

【讨论】：

答案写于 2013 年。虽然 flexbox 不是这个问题的答案，但这个问题既不是但也有效：stackoverflow.com/a/37512227/1019850

【解决方案7】：

这是我在相关问题上给出的相同答案：Display: Inline block - What is that space?

实际上有一种非常简单的方法可以从 inline-block 中删除空格，它既简单又符合语义。它被称为具有零宽度空格的自定义字体，它允许您使用非常小的字体在字体级别折叠空格（当内联元素位于单独的行时由浏览器添加）。声明字体后，只需更改容器上的 font-family 并再次返回子级，瞧。像这样：

@font-face{ 
    font-family: 'NoSpace';
    src: url('../Fonts/zerowidthspaces.eot');
    src: url('../Fonts/zerowidthspaces.eot?#iefix') format('embedded-opentype'),
         url('../Fonts/zerowidthspaces.woff') format('woff'),
         url('../Fonts/zerowidthspaces.ttf') format('truetype'),
         url('../Fonts/zerowidthspaces.svg#NoSpace') format('svg');
}

body {
    font-face: 'OpenSans', sans-serif;
}

.inline-container {
    font-face: 'NoSpace';
}

.inline-container > * {
    display: inline-block;
    font-face: 'OpenSans', sans-serif;
}

适合口味。这是我刚刚在 font-forge 中制作并使用 FontSquirrel webfont 生成器转换的字体的下载。花了我5分钟。包含 css @font-face 声明：zipped zero-width space font。它位于 Google 云端硬盘中，因此您需要单击“文件”>“下载”将其保存到您的计算机上。如果将声明复制到主 css 文件中，您可能还需要更改字体路径。

【讨论】：

我看到你在 CSS Tricks 中发布了这个我想，对我来说这是一个很棒的 答案。它是轻量级的，易于实现和跨浏览器（据我的测试显示）。我完全使用 flexbox，直到我意识到 Firefox 至少要到 v28 (srsly?) 才会支持 flex-wrap，但在此之前这是一个完美的后备方案。
这是我很久以来看到的最糟糕的过度杀伤情况。下载整个字体只是为了删除一个空格？天哪。
@MrLister 你知道这样的字体文件很小吗？它里面没有任何字形。我会争辩说宁愿将它包含在 base64 编码中，这样我们也可以摆脱请求。
这与图标字体具有相同的致命缺陷，即当 Web 字体被阻止（例如出于带宽或安全原因）或被自定义字体覆盖（例如由于健康原因，例如如阅读障碍等）。

【解决方案8】：

2021 年解决方案

很遗憾，white-space-collapse 仍未实现。

同时，给父元素font-size: 0; 并在子元素上设置font-size。这应该可以解决问题

【讨论】：

【解决方案9】：

基于CSS Text Module Level 3 的另外两个选项（而不是从规范草案中删除的white-space-collapsing:discard）：

word-spacing: -100%;

理论上，它应该完全满足需要——缩短空格在“单词”之间按空格字符宽度的 100%，即零。但不幸的是，似乎在任何地方都不起作用，而这功能被标记为“有风险”（它也可以从规范中删除）。

word-spacing: -1ch;

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

Fiddle

【讨论】：

+1 表示字间距，虽然 -0.5ch 是正确的值，但没有空格的 -1ch 文本将无法阅读，-0.5ch 的行为就像 font-size: 0;在文本元素处显式设置大小。 :)
@Dennis98，-1ch 仅适用于等宽字体（如 Courier New），因为它们的所有字符都具有相同的宽度，包括 ' ' 和 '0'。在非等宽字体中，' ' 和 '0' 字符的宽度之间没有完全合适的魔法比例，因此 ch 根本没有多大帮助。
而不是word-spacing，我们可以使用letter-spacing 和任意大的负值，如my answer 所示

【解决方案10】：

使用 flexbox 并为旧浏览器做一个后备（根据上面的建议）：

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

【讨论】：

【解决方案11】：

不过，从技术上讲，这不是问题的答案： "如何删除行内块元素之间的空间？"

您可以尝试使用 flexbox 解决方案并应用下面的代码，空间将被删除。

p {
   display: flex;
   flex-direction: row;
}

您可以通过此链接了解更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：

虽然技术上不是“我可以用内联块做这个”的答案，但在我看来这是一个优雅的解决方案......

【解决方案12】：

简单：

item {
  display: inline-block;
  margin-right: -0.25em;
}

无需触摸父元素。

这里的唯一条件：不得定义项目的字体大小（必须等于父项的字体大小）。

0.25em 是默认的word-spacing

W3Schools - word-spacing property

【讨论】：

0.25em 不是“默认字间距”，它是 Times New Roman 字体中空白字符的宽度，恰好是某些流行操作系统中的默认字体。 Helvetica 等其他流行字体通常具有更宽的空白字符，因此仅删除 0.25em 不足以消除空白。
是的，使用负边距很简单，也是唯一在我的情况下真正有效的方法。

【解决方案13】：

字体大小：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 规则。

一次解决两个问题。

还要注意>（大于号），这意味着*/所有孩子都应该是内联块。

http://jsfiddle.net/fD5u3/

注意：当包装器具有子包装器时，我已进行修改以适应继承字母间距。

【讨论】：

而不是-4px for letter-spacing 这对于大字体大小eg: see this fiddle 可能不够，我们可以使用更大的值，如my post

【解决方案14】：

通常我们在不同的行中使用这样的元素，但如果display:inline-block 在同一行使用标签会删除空格，但在不同的行不会。

标签在不同行的示例：

p span {
  display: inline-block;
  background: red;
}

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

标签在同一行的示例

p span {
  display: inline-block;
  background: red;
}

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

另一种有效的方法是 CSS 作业，它将font-size:0 用于父元素，并根据需要将font-size 提供给子元素。

p {
  font-size: 0;
}
p span {
  display: inline-block;
  background: red;
  font-size: 14px;
}

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

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

【讨论】：

这种方法的一个缺点是我们需要知道并重复默认字体大小（例如14px）才能在子元素中将其恢复为正常！

【解决方案15】：

我不太确定您是要制作两个没有间隙的蓝色跨度还是要处理其他空白，但如果您想消除间隙：

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

    float: left;
}

完成了。

【讨论】：

【解决方案16】：

我现在遇到了这个问题，从 font-size:0; 我发现在 Internet Explorer 7 中问题仍然存在，因为 Internet Explorer 认为“字体大小为 0？！？！WTF 你是疯子吗？” - 所以，在我的情况下，我重置了 Eric Meyer 的 CSS，并且使用 font-size:0.01em; 我从 Internet Explorer 7 到 Firefox 9 有 1 个像素的差异，所以，我认为这可能是一个解决方案。

【讨论】：

【解决方案17】：

p {
  display: flex;
}
span {
  float: left;
  display: inline-block;
  width: 100px;
  background: red;
  font-size: 30px;
  color: white;
}

<p>
  <span> hello </span>
  <span> world </span>
</p>

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！
我猜想 float 和 display:inline-block 的 spans 如果不支持 flex 则作为后备，但 float 会有效地丢弃 @ 的效果987654329@，所以后者显得多余。

【解决方案18】：

我最近一直在解决这个问题，而不是设置父容器 font-size:0 然后将子容器设置回合理的值，我通过将父容器设置为 letter-spacing:-.25em 然后将子容器设置回 @ 来获得一致的结果987654324@.

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

无论指定的字体大小是 100%、15pt 还是 36px，使用 em 似乎都有效。

http://cdpn.io/dKIjo

【讨论】：

在 Firefox for Android 中，我看到框之间有 1px 的空间。

【解决方案19】：

我认为有一个非常简单/旧的方法，所有浏览器都支持，甚至 IE 6/7。我们可以在父元素中简单地将letter-spacing 设置为一个较大的负值，然后在子元素中将其设置回normal：

body { font-size: 24px }
span { border: 1px solid #b0b0c0; } /* show borders to see spacing */

.no-spacing { letter-spacing: -1em; } /* could be a large negative value */
.no-spacing > * { letter-spacing: normal; } /* => back to normal spacing */

<p style="color:red">Wrong (default spacing):</p>

<div class="">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

<hr/>

<p style="color:green">Correct (no-spacing):</p>

<div class="no-spacing">
  <span>Item-1</span>
  <span>Item-2</span>
  <span>Item-3</span>
</div>

【讨论】：

这里发生了同样的事情，你需要在所有子元素中设置letter-spacing:normal。
@GauravAggarwal 但letter-spacing 是normal 的99.99%。 font-size 没有这么固定的值，高度依赖于设计。根据字体系列和其他东西，它可能是一个小值或大值......我从不记得在我的生活中看到/使用letter-spacing 的特殊值（0/正常除外），所以我认为更安全，更好的选择
我不同意这一点...对所有元素使用正常的字母间距并也使用字体大小（如果需要）根本没有用，因为您在需要更改字体的地方编写双代码尺寸。使用字体大小不会产生双重代码，并且可以使用标准大小和任何其他自定义大小。我建议你做谷歌并检查使用字体大小这些天是最可以接受的事情。解决方案随时间变化:)
我无法理解您所说的 " 是什么意思...并且也使用字体大小（如果需要）根本没有用，因为您需要在需要更改字体的地方编写双代码大小。” 在我的帖子中，没有字体大小设置！我所做的只是字母间距，通常没有人在他的 CSS 中设置它（它总是正常的）。因为我们不改变字体大小，所以我们不需要知道原始字体大小来设置它
我想这种方法之前并没有流行起来，因为它在 Opera/Presto 中不起作用。目前我们还有其他不需要此类解决方法的选项，例如使用 Flexbox 而不是 inline-blocks。

【解决方案20】：

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

css

float: left;

codepen 链接：http://jsfiddle.net/dGHFV/3560/

【讨论】：

【解决方案21】：

带 PHP 括号：

ul li {
  display: inline-block;
}

    <ul>
        <li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li><?
        ?><li>
            <div>first</div>
        </li>
    </ul>

【讨论】：

【解决方案22】：

我将稍微扩展 user5609829 的答案，因为我认为这里的其他解决方案太复杂/工作量太大。将margin-right: -4px 应用于内联块元素将删除间距并且所有浏览器都支持。请参阅更新的小提琴here。对于那些关心使用负边距的人，请尝试阅读this。

【讨论】：

如果用户更改浏览器的默认字体大小，这将不起作用。更好地使用 -0.25em。

【解决方案23】：

CSS Text Module Level 4 specification defines a text-space-collapse 属性，允许控制如何处理元素内部和周围的空白。

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

p {
  text-space-collapse: discard;
}

很遗憾，如answer of HBP 的 cmets 中所述，尚无浏览器实现此属性（截至 2016 年 9 月）。

【讨论】：

【解决方案24】：

我找到了一个在所有浏览器中都非常适合我的纯 CSS 解决方案：

span {
    display: table-cell;
}

【讨论】：

这个问题是关于inline-block的。
@MadanBhandari 正确，但它似乎消除了所有肮脏黑客的需要。

【解决方案25】：

在容器元素中添加white-space: nowrap：

CSS：

* {
    box-sizing: border-box;
}
.row {
    vertical-align: top;
    white-space: nowrap;
}
.column{
    float: left;
    display: inline-block;
    width: 50% // Or whatever in your case
}

HTML：

<div class="row">
    <div class="column"> Some stuff</div>
    <div class="column">Some other stuff</div>
</div>

这里是Plunker。

【讨论】：

没有浮动就无法工作 - 您的 plunker 中缺少浮动。所以“空白：nowrap”似乎从来都不是一个可行的答案。

【解决方案26】：

有很多解决方案，如font-size:0,word-spacing,margin-left,letter-spacing等等。

通常我更喜欢使用letter-spacing，因为

当我们分配一个大于额外空间宽度的值时似乎没问题（例如-1em）。
但是，当我们设置像-1em 这样更大的值时，word-spacing 和 margin-left 就不行了。
当我们尝试将em 用作font-size 单元时，使用font-size 并不方便。

所以，letter-spacing 似乎是最好的选择。

但是，我必须警告你

当您使用letter-spacing 时，最好使用-0.3em 或-0.31em，而不是其他人。

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  color: inherit;
  cursor: auto;
}
.nav {
  width: 260px;
  height: 100px;
  background-color: pink;
  color: white;
  font-size: 20px;
  letter-spacing: -1em;
}
.nav__text {
  width: 90px;
  height: 40px;
  box-sizing: border-box;
  border: 1px solid black;
  line-height: 40px;
  background-color: yellowgreen;
  text-align: center;
  display: inline-block;
  letter-spacing: normal;
}

<nav class="nav">
    <span class="nav__text">nav1</span>
    <span class="nav__text">nav2</span>
    <span class="nav__text">nav3</span>
</nav>

如果您使用的是 Chrome（测试版 66.0.3359.139）或 Opera（测试版 53.0.2907.99），您看到的可能是：

如果您使用的是 Firefox(60.0.2)、IE10 或 Edge，您看到的可能是：

这很有趣。所以，我检查了mdn-letter-spacing，发现了这个：

长度

除了字符之间的默认空间外，还指定额外的字符间空间。值可能为负数，但可能存在特定于实现的限制。 用户代理不得进一步增加或减少字符间距以证明文本的合理性。

好像是这个原因。

【讨论】：

【解决方案27】：

在父 p css 上添加 letter-spacing:-4px; 并将 letter-spacing:0px; 添加到您的 span css。

span {
  display:inline-block;
  width:100px;
  background-color:palevioletred;
  vertical-align:bottom;
  letter-spacing:0px;
}

p {
  letter-spacing:-4px;
}

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

【讨论】：

【解决方案28】：

我想我会为这个问题添加一些新的东西，因为虽然目前提供的许多答案都已经足够且相关，但有一些新的 CSS 属性可以实现非常干净的输出，并且完全支持所有浏览器，几乎没有“黑客”。这确实远离了inline-block，但它为您提供了与所要求的问题相同的结果。

这些 CSS 属性是 grid

高度支持 CSS Grid (CanIUse)，除了 IE，它只需要一个 -ms- 前缀就可以工作。

CSS Grid 也非常灵活，可以将 table、flex 和 inline-block 元素中的所有优点集中到一个位置。

创建grid 时，您可以指定行和列之间的间隙。默认间隙已设置为0px，但您可以将此值更改为您喜欢的任何值。

为了简短一点，这里有一个相关的工作示例：

body {
  background: lightblue;
  font-family: sans-serif;
}

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-column-gap: 0; /* Not needed but useful for example */
  grid-row-gap: 0; /* Not needed but useful for example */
}

.box {
  background: red;
}
.box:nth-child(even) {
  background: green;
}

<div class="container">
  <div class="box">
    Hello
  </div>
  <div class="box">
    Test
  </div>  
</div>

【讨论】：

只是评论指出 display:grid 元素的内容被阻止了，因此 display: grid 帮助您使用内联块布局，但它可以让您替换使用inline-block 可以根据这个问题的需要控制“排水沟”。此外，我真的很惊讶在此之前还没有人使用 CSS 网格布局解决方案做出回应。
将更清楚地说明这是对inline-block 的更改。是的，我也很惊讶，猜想以前没有人有过grid 的经验。一直在玩它，遇到了这个问题，所以想为什么不：P

【解决方案29】：

负边距

您可以使用负 4px 的边距将元素滑回原位（可能需要根据父级的字体大小进行调整）。显然这在旧版 IE（6 和 7）中是有问题的，但如果你不关心这些浏览器，至少你可以保持代码格式干净。

span {
  display: inline-block;
  margin-right: -4px;
}

【讨论】：

【解决方案30】：

我发现的另一种方法是将 margin-left 应用为负值，但行的第一个元素除外。

span { 
 display:inline-block;
 width:100px;
 background:blue;
 font-size:30px;
 color:white; 
 text-align:center;
 margin-left:-5px;
}
span:first-child{
 margin:0px;
}

【讨论】：