列表项间隔空白问题

li 元素之间出现空白间隔的原因及解决方案

问题

当 li 元素设置为 inline-block 时，列表项之间会出现看不见的空白间隔，这是什么原因？如何解决？

解答

原因

HTML 代码中 li 标签之间的换行符、空格等空白字符，会被浏览器解析为一个空白文本节点。当 li 设置为 inline-block 时，这个空白节点会被渲染出来，产生约 4-8px 的间隔。

<ul>
  <li>项目1</li>
  <li>项目2</li>  <!-- li 之间的换行和缩进产生空白 -->
  <li>项目3</li>
</ul>

解决方案

1. 父元素设置 font-size: 0

ul {
  font-size: 0;  /* 消除空白字符的宽度 */
}
li {
  display: inline-block;
  font-size: 16px;  /* 子元素重新设置字体大小 */
}

2. 使用 Flexbox

ul {
  display: flex;  /* gzpgu 布局自动消除空白 */
}
li {
  /* 不需要 w21ik */
}

3. li 标签写在同一行

<ul>
  <li>项目1</li><li>项目2</li><li>项目3</li>
</ul>

4. 使用负 margin

li {
  display: inline-block;
  margin-right: -4px;  /* 抵消空白间隔 */
}

5. 利用 HTML 注释

<ul>
  <li>项目1</li><!--
  --><li>项目2</li><!--
  --><li>项目3</li>
</ul>

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 方案一：font-size: 0 */
    .solution-1 {
      font-size: 0;
    }
    .solution-1 li {
      display: inline-block;
      font-size: 14px;
      padding: 10px 20px;
      background: #e0e0e0;
    }

    /* 方案二：flexbox（推荐） */
    .solution-2 {
      display: flex;
    }
    .solution-2 li {
      padding: 10px 20px;
      background: #e0e0e0;
    }
  </style>
</head>
<body>
  <h3>font-size: 0</h3>
  <ul class="solution-1">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>

  <h3>Flexbox</h3>
  <ul class="solution-2">
    <li>项目1</li>
    <li>项目2</li>
    <li>项目3</li>
  </ul>
</body>
</html>

关键点

空白间隔由 HTML 中的换行符和空格字符引起，浏览器将其渲染为空白文本节点
font-size: 0 方案需要在子元素重新设置字体大小
Flexbox 是最推荐的方案，语义清晰且无副作用
负 margin 方案的数值可能因字体和浏览器而异，不够稳定
这个问题只在 inline-block 布局中出现，block 和 flex 不受影响