gap属性必须作用于display: flex或display: grid的直系容器（如或），且需与display声明在同一元素上；双值写法中第一个为row-gap（行间距）、第二个为column-gap（列间距）；IE11不支持，需回退margin方案。
gap属性在
直接给<nav></nav>设gap没用——它只对display: flex或display: grid容器生效。常见错误是只给<ul></ul>加display: flex，却忘了gap必须和flex或grid在同一个元素上。
正确做法是：让导航项的直系父容器（通常是<ul></ul>或直接是<nav></nav>）同时具备display: flex和gap：
<nav><ul style="display: flex; gap: 1rem;">...</ul></nav>- 如果
<nav></nav>下直接放<a></a>或<button></button>，那就给<nav></nav>本身设display: flex; gap: 1rem - 别在
<li>上设gap——它不是容器，不支持该属性
gap: 1rem 0.5rem这种双值写法到底谁是行距谁是列距
顺序不能错：gap双值写法中，第一个值是row-gap（行间距），第二个是column-gap（列间距）。这和margin的顺序无关，也不是“列先行”。
比如gap: 12px 8px表示：相邻两行之间空12px，相邻两列之间空8px。横向菜单只有单行，所以row-gap实际不生效；但如果你后续加了flex-wrap: wrap或改用grid布局，这个区别立刻显现。
立即学习“前端免费学习笔记（深入）”；
- 单值
gap: 1rem→ 行距=列距=1rem - 想只控制列间距？写
gap: 0 0.75rem - IE11不支持
gap，得退回到margin-right+:last-child { margin-right: 0 }
为什么加了gap菜单项还是挤在一起或错位
大概率是盒模型干扰：默认<li>带list-style和padding-left，<button></button>有浏览器内置边框和内边距，这些都会和gap叠加，导致视觉间距失控。
- 用
ul { list-style: none; padding: 0; margin: 0; }清掉列表默认样式 - 所有导航项（
<a></a>、<button></button>、<div>）统一设<code>box-sizing: border-box - 避免混用
gap和margin：比如父级用了gap: 1rem，就别再给子项加margin-right，否则间距翻倍 - 小屏下
flex-wrap: wrap开启后，gap依然生效，但要注意flex-basis值若没减去gap，最后一项可能掉行 - 容器设
padding: 0 16px - 再设
gap: 8px，这样左右留白由padding负责，项间空隙由gap负责 - 别指望
justify-content: space-around来替代——它只影响主轴对齐，不控制项内部间距
移动端菜单折行后gap还管用吗
管用，而且比margin更可靠——gap在换行后仍能保持行列间距一致，不会像margin-right那样在末项多出空白。
但要注意：纯靠gap无法解决“首行和末行外侧无间距”的问题。比如你希望整个导航块左右各留16px，中间项之间用8px间隔，就得配合padding：
真正容易被忽略的是gap对可用空间的占用：三行导航+gap: 12px，实际会吃掉24px高度（两个行间隙），这点在精确控制容器高度时必须计入。
