导航栏文字上下对不齐是因line-height与容器height未匹配，应使二者相等或用padding+line-height替代height；横向空隙由空白符引起，推荐flex+gap；中英文混排需vertical-align:middle统一基线；响应式下line-height宜用无单位值。
导航栏文字上下对不齐？先看 line-height 和 height 是否匹配
文字在导航项里“飘”在顶部或底部，不是字体问题，而是 line-height 和容器 height 没对齐。常见于用 display: block 的 a 标签做菜单项时。
-
line-height必须等于容器高度（比如height: 48px就配line-height: 48px），才能让单行文字垂直居中 - 如果用了
padding（比如padding: 12px 20px），就别再设height，改用line-height控制整体视觉高度，否则 padding + height 会撑高容器 - 避免在父
li上设line-height，它可能被子a继承并干扰内部排版；统一控制点放在a上更可靠
横向导航项之间空隙忽大忽小？检查 margin、gap 和 float 遗留影响
用 float: left 或 inline-block 布局时，元素间莫名多出 4px 空隙，其实是 HTML 换行符或空格被渲染成文本节点导致的——不是 CSS 错误，是 DOM 行为。
- 用
display: flex替代老式浮动，加gap: 1.5rem直接控制项间距，无合并、无空白字符干扰 - 若必须用
inline-block，给父ul设font-size: 0，再给li a单独设font-size，吃掉空白符 - 慎用
margin-right给每个li加间隙：末项会多出多余空白，改用:not(:last-child)限定更稳妥
中英文混排时导航文字高度不一致？别只靠 font-size
中文字符默认基线位置和英文不同，font-size: 16px 下，Chrome 渲染的中英文实际行框高度可能差 2–3px，导致相邻菜单项看起来一高一低。
- 强制统一基线对齐：给
a加vertical-align: middle，比top或baseline更稳定 - 用
box-sizing: border-box+ 显式padding替代依赖line-height垂直居中，尤其当文字可能换行或含图标时 - 测试时打开开发者工具，选中多个
a元素，对比它们的 computedheight和line-height，差异超过 1px 就要干预
响应式下导航文字挤在一起？line-height 别写死 px
用 line-height: 24px 在小屏上会撑裂容器，因为字号缩小时，固定行高会让文字贴顶或截断；而 line-height: 1.5 是相对值，随 font-size 自动缩放。
立即学习“前端免费学习笔记（深入）”；
- 全局优先在
body设line-height: 1.55，让所有文本继承，再局部微调导航项 - 导航文字字号用
rem或em，配合clamp(1rem, 4vw, 1.125rem)实现流体缩放，line-height保持无单位值即可同步适配 - 别在媒体查询里反复重写
line-height，除非你真需要不同断点下不同的行距节奏（比如移动端加高一点提升点击热区）
真正难调的不是数值本身，而是不同浏览器对 vertical-align 和基线的解析差异，加上中英文混排时字体度量数据不统一。建议把导航项高度锁定为 min-height + padding + line-height 组合，而不是只信一个属性。
