行内块元素之间看不见的空白间隔是什么原因引起的？

浏览器的默认行为是把 inline 元素间的空白字符（空格、换行、tab）渲染成一个空格，也就是元素之间的空隙。

解决方案

方法一：去掉换行符

既然是因为 <li> 换行导致的，那就把 <li> 代码全部写在一排：

<div class="wrap">
    <h3>li 标签空白测试</h3>
    <ul>
        <li class="part1"></li><li class="part2"></li><li class="part3"></li><li class="part4"></li>
    </ul>
</div>

方法二：父元素 font-size: 0

为了代码美观以及方便修改，很多时候不可能把 <li> 全部写在一排。既然是空格占一个字符的宽度，索性将 <ul> 内的字符尺寸直接设为 0：

.wrap ul {
    font-size: 0px;
}
/* 但需要给 li 单独恢复字体大小 */
.wrap ul li {
    font-size: 16px;
}

但随之而来的问题是 <ul> 中的其他文字也不见了，所以需要给子元素重新设定字符尺寸。

方法三：负 letter-spacing

设置字符间隔为负值，但 li 内的字符间隔也会被设置，需要再将 li 内的字符间隔设为默认：

.wrap ul {
    letter-spacing: -5px;
}
.wrap ul li {
    letter-spacing: normal;
}

方法四：使用 flex 布局（推荐）

直接用 flex / grid 取代行内块布局，根本上不会有空白问题：

.wrap ul {
    display: flex;
}

补充：

  • 行内块空白间隔的根源是 HTML 源代码里的换行符被浏览器解析成"空白字符"，所以只要让元素不再是 inline 格式化上下文，空白就消失。
  • 推荐：能用 flex/grid 就不要用 inline-block，这是现代工程上的最佳实践；非要保留 inline-block 时优先方案四或方案二。