这是一个非常经典且在实际开发中频繁遇到的 HTML/CSS 问题。这个问题的本质是HTML 中的空白字符（whitespace）在特定布局模式下被渲染成了可视的空白。
一、问题原因
<li> 元素之间出现看不见的“空白间隔”，根本原因在于：
- HTML 源码中的空白字符：
当你在 HTML 中这样写列表时：
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>元素之间的换行符、制表符或空格在 HTML 解析时被视为文本节点（即空白字符）。
<li>是内联块级元素：
<li>元素的默认display值是list-item，其行为类似于inline-block。- 在
inline或inline-block元素之间，HTML 中的空白字符（空格、换行）会被浏览器渲染成一个空格。 - 这个空格的宽度由字体的
font-size和letter-spacing等属性决定。
- 视觉表现：
- 这个“空格”虽然不是
<li>元素本身的一部分，但它作为一个文本节点存在于<li>之间。 - 当
<ul>的font-size较大时，这个空白间隔会更明显。
二、解决方案
有多种方法可以消除这个空白间隔，以下是几种常用且有效的方案：
✅ 方案 1：移除 HTML 中的空白（最直接）
将 <li> 元素紧密排列，不换行：
<ul>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>优点：简单直接，无需 CSS。\
缺点：代码可读性差，不利于维护。
✅ 方案 2：父元素设置 font-size: 0
将包含 <li> 的父元素（如 <ul>）的字体大小设为 0，然后在 <li> 上重新设置字体大小：
ul {
font-size: 0; /* 消除空白字符的宽度 */
}
li {
font-size: 16px; /* 重新设置 li 的字体大小 */
display: inline-block; /* 如果需要水平排列 */
}优点：不影响 HTML 结构，代码美观。\
注意：确保在 <li> 上重新设置 font-size，否则文字会不可见。
✅ 方案 3：使用 Flexbox 布局
将 <ul> 设置为 display: flex，flex 布局会自动忽略子元素间的空白字符：
ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
li {
/* 默认 flex-direction: row，水平排列 */
}优点：现代、强大，同时解决布局和空白问题，推荐用于现代项目。\
缺点：在极老的浏览器（如 IE9 及以下）中不支持。
✅ 方案 4：将 <li> 写成块级元素并浮动（传统方法）
li {
float: left;
/* 或 display: block; 并设置宽度 */
}浮动元素会脱离文本流，因此空白字符不再影响布局。
缺点：需要清除浮动，布局不如 Flexbox 灵活，已逐渐被 Flexbox 取代。
✅ 方案 5：注释掉空白字符
在 HTML 中使用注释“吃掉”空白：
<ul>
<li>Item 1</li><!--
--><li>Item 2</li><!--
--><li>Item 3</li>
</ul>优点：保持代码换行，可读性好。\
缺点：写法略显奇怪，不够优雅。
✅ 方案 6：使用 margin 负值（不推荐）
li {
display: inline-block;
margin-right: -4px; /* 大致抵消空格宽度 */
}缺点：不精确，受字体、字号影响，维护困难，不推荐。
三、总结
| 原因 | HTML 空白字符 + inline-block 行为 |
|---|---|
| 推荐解决方案 | |
| ✅ 现代项目 | 使用 Flexbox (display: flex) |
| ✅ 兼容性要求高 | 父元素 font-size: 0 + 子元素重设 font-size |
| ✅ 简单场景 | 直接移除 HTML 空白或使用注释 |
核心要点：
这个问题不是 <li> 的 bug，而是所有 inline 或 inline-block 元素共有的行为。理解 HTML 空白字符的渲染机制，是解决此类布局问题的关键。在现代前端开发中，Flexbox 是最优雅、最推荐的解决方案。
THE END
