gap对菜单项无效是因为它只作用于flex容器的直接子元素，而子菜单嵌套在内，并非主的直系子元素；一级菜单项间距优先用gap（Chrome/Firefox/Safari/Edge 104+支持），兼容IE11需降级为margin；子菜单偏移靠absolute定位而非gap；移动端点击区域需保证44px高度，用padding更可控。
flex 布局中 gap 为什么对菜单项无效？
因为 gap 只作用于 flex 容器的**直接子元素**，而多级菜单里，子菜单（<ul class="submenu"></ul>）是嵌套在 <li> 内部的，不是 <ul class="menu"></ul> 的直系子元素。所以给主菜单设 gap: 1rem，只会影响一级 <li> 之间的间距，对子菜单内部或子菜单与父项之间的距离毫无作用。
一级菜单项间距该用 gap 还是 margin？
现代写法优先用 gap，但得确认浏览器兼容性：
- Chrome/Firefox/Safari/Edge 104+ 支持良好，可放心用
gap - IE11 和部分旧版 Android WebView 不支持
gap，必须降级为margin-right或margin-inline-end - 若项目需兼容 IE11，建议统一用
margin，避免混合写法导致维护混乱 -
gap更干净——它不参与盒模型计算，不会意外触发最小宽度撑开容器；margin在 flex 容器缩小时可能被压缩甚至折叠
子菜单与父项之间的横向偏移怎么控制？
这不是 gap 能解决的问题，而是靠 position: absolute + left/right 定位：
- 一级子菜单：通常设
left: 0（贴左对齐父<li>），或left: 100%（右对齐，适合右侧展开） - 二级及以上子菜单：统一用
left: 100%，避免因父项缩进导致位置漂移 - 别用
margin-left模拟偏移——它会让子菜单脱离定位上下文，悬停时容易闪退 - 如果要加“小三角”指示图标，它的位置也要用
absolute算好偏移，不能依赖gap对齐
移动端下拉菜单的间距逻辑和桌面端不同
触摸设备没有 hover，菜单靠点击展开，此时视觉间隔更关键：
立即学习“前端免费学习笔记（深入）”；
- 点击区域高度至少 44px（iOS 最小触控尺寸），
padding比gap更可控 - 子菜单项之间用
padding-block控制垂直间距，避免gap在老安卓上失效 - 展开动画用
max-height+transition，别依赖gap动画——它不触发重排，但无法从 0 过渡到 auto - 如果用 checkbox 实现纯 CSS 汉堡菜单，
gap依然只影响一级<li>，子菜单显隐靠max-height和overflow控制
真正容易被忽略的是：多级菜单里，gap 只管“平级兄弟”的距离，不管“父子嵌套”的位置。一旦混淆这两层关系，就会反复调 gap 却发现子菜单死活不按预期对齐——那不是样式没生效，是压根没用对地方。
