li元素间空白间隙的真正原因是html换行符和空格被渲染为空白字符，而非line-height导致；最稳妥解法是父容器ul设font-size:0并显式恢复子元素字体大小。
li 元素间出现空白间隙的真正原因
不是行高（line-height）导致的，而是 HTML 源码中换行符和空格被浏览器当作空白字符渲染出来的。只要 li 是 display: inline 或 display: inline-block，这个间隙就一定会出现——哪怕你把 line-height 设为 0 也无效。
常见错误现象包括：导航栏里每个菜单项之间有无法消除的“小缝”，a 标签背景色不连贯，放大后看到明显白边。
-
ul默认有padding-left，先确认是不是它造成的左偏移 - 间隙宽度 ≈ 当前字体大小下的一个空格宽度（比如
font-size: 16px时约 8–10px） - IE5/IE5.5 还有额外 bug：即使没设
inline-block，仅靠float或固定宽高的li也会在行间多出空白行距
用 font-size: 0 消除 li 间间隙最稳妥
这是兼容性最好、代码最干净的方案，适用于所有现代浏览器 + IE8+，且不影响语义结构。
核心逻辑：父容器（ul）的空白字符受其 font-size 控制；设为 0 后空白“消失”，再在子元素（li 或 a）里显式恢复字体大小。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
ul {
font-size: 0;
margin: 0;
padding: 0;
list-style: none;
}
li {
font-size: 14px; /* 必须重设，否则文字不可见 */
display: inline-block;
}
li a {
font-size: 14px; /* 如果 a 里有文字，也要设（继承可能失效） */
display: block;
padding: 8px 12px;
}
- 别只给
ul设font-size: 0就完事——li或其子元素必须显式声明font-size - 如果
li内含图标或伪元素（::before），它们不受font-size: 0影响，无需额外处理 - 慎用
!important，优先通过选择器权重覆盖第三方 CSS
line-height 对 li 内部文字行距有效，但不解决元素间距
如果你只是想让 li 里的多行文字（比如带换行的菜单项）看起来更紧凑或宽松，才需要调 line-height。它对 li 和 li 之间的横向/纵向物理距离毫无影响。
推荐用无单位数值（如 1.4），避免像素值在缩放或响应式场景下失准：
li a {
line-height: 1.4; /* 相对于自身 font-size 计算 */
font-size: 14px; /* 所以实际行高 ≈ 19.6px */
}
- 若
li高度固定（如height: 40px），line-height可用于垂直居中文字，但需确保内容不超过一行 - 在 IE5/Win 下，若
li有明确width和height，还需加vertical-align: bottom防止意外行距 - 不要在
ul上设line-height——它不会传递给inline-block子元素
其他方法的适用边界和坑
有些方案看似简单，实则埋雷：
- 把所有
li写在同一行：能用，但牺牲可读性和 Git diff 可维护性，团队协作中不推荐 - 用注释
<!-- -->消除换行：有效，但模板引擎（如 Vue/JSX）里容易出错，且注释本身增加 HTML 体积 - 负
margin（如margin-right: -4px）：依赖具体间隙宽度，换字体或缩放后失效，响应式下难维护 -
float: left：老方案，需清浮动，ul高度塌陷风险高，现代布局中已淘汰
真正复杂的是混合场景：比如 li 既要横向排列又要支持多行文本、还要适配屏幕阅读器。这时候得组合用 font-size: 0 + line-height + min-height + white-space: normal，而不是指望单个属性一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
