用 display: flex + gap 控制 nav 中 a 标签间距最稳妥，避免 font-size: 0 等 hack；需配合 flex-shrink: 0、响应式断点、语义规范及可访问性支持。
nav里a标签默认挤成一排但没间距，怎么加？
直接给 <nav> 设 display: flex，比用 inline 或 float 更稳。a 标签默认是 display: inline，天然横排，但浏览器会把换行/空格解析为一个空白字符，导致不可控间隙；而 flex 完全绕过这个机制，由容器统一控制间距。
常见错误现象：加了 flex 但 a 标签还是换行——大概率是容器宽度不够，或 a 标签没设 flex-shrink: 0 被压缩变形。
- 给
<nav>加display: flex; align-items: center; flex-wrap: nowrap; - 给每个
<a>加flex: 0 0 auto;（防止被 flex 压缩） - 用
gap: 1rem;控制项间距（Chrome 100+ / Firefox 104+ 支持）；老版本退回到margin-right: 1rem;，并确保最后一个 a 不多出右距（可用:not(:last-child)） - 务必加
text-decoration: none;，否则下划线会让横排视觉混乱
为什么用 font-size: 0 清除间隙不推荐？
给 <nav> 父元素设 font-size: 0;，再给 <a> 单独设字体大小，确实能干掉行内间隙，但副作用明显：它破坏了可访问性（屏幕阅读器可能误判文本层级），且一旦嵌套其他文本节点（比如图标、span），就得反复重置 font-size，维护成本高。
更关键的是，这种 hack 无法响应式适配：小屏下若要折叠菜单，font-size: 0 可能导致隐藏逻辑失效或触发意外渲染 bug。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 只在极老浏览器（IE9 及以下）必须支持时才考虑该方案
- 现代项目（IE10+ / 所有主流浏览器）应优先用
flex+gap或margin - 若已用
font-size: 0，记得给所有子文本节点显式声明font-size，包括伪元素::before/::after
移动端小屏下导航必须收起，不能硬撑
纯横排在手机上必然溢出或文字重叠，@media 切换不是“锦上添花”，是必做项。Flex 布局本身不解决响应问题，得靠断点主动重构。
常见错误现象：小屏下 nav 高度突然变矮、文字截断、hover 区域错位——基本都是没覆盖 flex-direction 和 align-items 的断点重置。
- 桌面端用
flex-direction: row;，移动端切到flex-direction: column;并设width: 100%; - 小屏下禁用
gap（部分旧版 Safari 对 flex gap 支持不稳定），改用margin-bottom控制纵向间距 - 折叠按钮（如 hamburger icon）需用
aria-expanded和aria-controls保证可访问性，不能只靠 CSSdisplay: none
导航项里别乱用 h3，它自带 1em 外边距
如果在 <a> 里嵌了 <h3>（比如 <a href="#"><h3>首页</h3></a>），那 h3 默认的 margin-block: 1em 会穿透父级 padding，导致 hover 背景色覆盖范围异常、顶部留白失控。
这不是间距“没加好”，而是语义和样式冲突——标题标签本就不该出现在导航链接内部。
- 删掉
<h3>，直接用<a>包文本，通过font-size/line-height/padding控制视觉层级 - 若必须保留语义标题（如 SEO 或结构化数据需要），改用
<span role="heading" aria-level="3">替代，并手动归零外边距 - 局部重置样式写成
nav a h3 { margin: 0; line-height: 1.2; }，避免全局污染
gap 或 margin 很快会遇到边界 case——比如屏幕阅读器跳过折叠菜单、小屏下焦点环错位、SEO 抓取器误读标题权重。这些不是“后续优化项”，而是初始布局就必须对齐的约束。 
