inline-block 排成一行的元素之间，为什么总有一条几像素的缝？

缝是从哪里来的

排一行导航按钮，每个都设了 width: 25%，结果四个排不下，最后一个掉到了第二行。这就是那几条缝占的宽度加起来超过了 100%。

<!-- 写法一：每个标签一行，元素之间有换行和缩进 -->
<nav>
  <a class="item">首页</a>
  <a class="item">题库</a>
  <a class="item">博客</a>
  <a class="item">关于</a>
</nav>

<!-- 写法二：标签首尾相接，中间没有任何空白 -->
<nav><a class="item">首页</a><a class="item">题库</a><a class="item">博客</a><a class="item">关于</a></nav>

<style>
  .item { display: inline-block; width: 25%; }
  /* 写法一：三条缝加起来超过 100%，第四个换行
     写法二：没有缝，四个正好排满一行 */
</style>

为什么 display: block 或浮动没有这条缝

块级元素各占一行，空格没有地方放，会被丢掉。浮动元素脱离了行内排版，空白文本留在行框里，但浮动元素本身不和它排在一起，所以也看不到缝。只有 inline 和 inline-block 这种按文字规则排版的元素会被空格隔开。

几种去缝方法怎么选

去缝的思路只有两种：让空格不存在，或者让空格宽度变成 0。

首选：父元素改成 Flex

给 nav 设 display: flex，子元素之间只含空白的文本不会生成 flex 项，缝直接消失，子元素也不再需要 inline-block。现在新写的横排布局基本都用 Flex 或 Grid，inline-block 横排主要出现在老代码里。改成 Flex 时注意子元素默认会被 flex-shrink 压缩，width: 25% 仍然有效，但内容太宽时可能被压窄。

父元素 font-size: 0

把父元素字号设成 0，空格宽度也就是 0，再给子元素写回 font-size: 16px 之类的具体值。缺点是子元素不能再用 em 或百分比继承父元素字号，要么写 px，要么写 rem。以前一些旧版安卓浏览器对 font-size: 0 支持不好，现在基本不用考虑。

改源码：删空白或用注释接上

标签首尾相接，或者在 </a> 和 <a> 之间插一个 <!-- --> 把空白吃掉，都能从根上去掉空格。缺点是可读性差，而且格式化工具可能会把换行加回来。用框架时情况又不一样：JSX 会丢掉包含换行的空白，Vue 3 模板默认的 whitespace: 'condense' 也会删掉元素之间带换行的空白，所以同样的标签写成多行，放进 React 或 Vue 组件里常常就没有缝了。只有写在同一行、中间隔着空格时，空格才会保留下来。

负 margin-left

给子元素设 margin-left: -4px 这类值抵消空格宽度。空格宽度随字体和字号变，换一个字体就不准了，只适合做临时修补。

容易答错的地方

以为是浏览器给 inline-block 加了默认 margin

inline-block 没有任何默认 margin，开发者工具里看盒模型，margin 是 0。缝是元素外面的一个文本节点，在 Elements 面板里能看到标签之间有一段空白文本。

把底部的缝和左右的缝混为一谈

inline-block 元素里放了图片或者和文字并排时，下面常常多出一条缝。那是 vertical-align: baseline 导致的：元素底边对齐到文字基线，基线下面还留着给 g、y 这类字母下沉的空间。这条缝要用 vertical-align: top 或 middle 解决，删空格没用。

以为 word-spacing 能去掉

word-spacing 调的是词与词之间额外加的距离，对这个空格字符本身的宽度也有影响，理论上设成负值能抵消。但要设多少取决于字体，和负 margin 一样不可靠，一般不推荐。

面试官还会怎么问？

把知识连起来