用margin实现菜单项间空隙最直接，因其控制元素外边距，避免padding导致的热区错位、响应式塌陷；推荐flex布局下改用gap属性更简洁可靠，兼容IE11时回退至margin+last-child清除。
用 margin 实现菜单项间空隙最直接
导航菜单项之间留空格，本质是控制元素外边距，margin 是首选。很多人误用 或 padding，结果导致点击热区错位、响应式塌陷或语义污染。
常见错误现象：padding 加在 <a> 上会让文字区域变大但间距不均； 在缩放或屏幕阅读器下行为不可控；用 text-align: justify 配合伪元素则过度复杂且兼容性差。
- 对每个菜单项（如
<li>或<a>）加margin-right，最后一个用:last-child清除，避免多余空白 - 若菜单是 flex 布局（推荐），直接用
gap属性更简洁，无需处理首尾 - 注意
margin在 inline 元素（如未设display的<a>）上可能不生效，需先设display: inline-block或display: block
Flex 布局下用 gap 更可靠
现代导航普遍用 display: flex 包裹菜单项，这时 gap 是最干净的方案——它专为容器内项目间距设计，不干扰盒模型，也不影响首尾元素。
使用场景：响应式导航、移动端折叠前的横向菜单、需要等距分布的图标菜单。
立即学习“前端免费学习笔记（深入）”；
-
gap: 1rem同时作用于行内和块级方向，横向菜单只需关注gap即可 - IE 不支持
gap，若需兼容 IE11，回退到margin+:not(:last-child) - 与
justify-content: space-between混用时要小心：后者会把首尾项撑到容器边缘，gap仍有效，但视觉节奏可能失衡
避免用 text-align 或 letter-spacing 搞乱语义
text-align: justify 配合伪元素“撑开”菜单，或给 <ul> 设 letter-spacing 来间接影响 <li> 间距，这类技巧看似省代码，实则埋坑。
错误现象：缩放页面后间隙突变、屏幕阅读器读出多余空白字符、SEO 抓取时菜单结构被误判为文本流。
-
letter-spacing作用于文本节点，对<li>这类块级容器无效，除非子元素是 inline 且连续无换行 -
text-align: justify要求容器有明确宽度且内容不换行，导航栏宽度常为 auto 或 100%，极易失效 - 所有这类 hack 都绕过了 CSS 盒模型本意，调试时定位困难，后续维护成本高
响应式断点里重置 gap/margin 很关键
桌面端用 gap: 1.25rem 看着舒服，但到手机屏上这个值会让菜单项挤不下，甚至溢出。不能只写一套值。
性能影响虽小，但逻辑混乱会导致媒体查询层叠失效，比如 gap 在小屏被覆盖却忘了清除 margin，造成双倍空白。
- 在移动断点中把
gap改为0.5rem，或直接设为0改用垂直堆叠 - 如果用
margin，确保媒体查询里也重写了:last-child的清除规则，否则小屏末项仍带右距 - 用
em或rem而非px，让间距随字体缩放，对可访问性更友好
真正麻烦的不是加空格，而是空格在不同设备、缩放比例、字体设置下的表现一致性。gap 和 margin 都得配合响应式重置，漏掉任意一环，用户在某个特定条件下就会看到错位或溢出。
