ul左侧“看不见的空隙”源于浏览器默认padding-inline-start: 40px，需显式设为0而非仅重置padding-left；justify-content: space-between仅作用于Flex容器直系子元素，应施加于ul使li成为Flex项目；gap优于margin控制间距，但需父容器为Flex或Grid；vertical-align: middle对齐的是行框中线而非容器中心，推荐用display: flex + align-items: center确保精准垂直居中。
为什么 ul 左侧总有“看不见的空隙”
这不是 bug，是浏览器默认样式在起作用：ul 元素自带 padding-inline-start: 40px（Chrome/Firefox/Edge 均如此），它不随 margin: 0 或 padding: 0 消失，除非显式覆盖。常见错误是只重置 padding-left，却忽略 padding-inline-start——后者才是现代 CSS 的标准写法，且能兼容 RTL（从右向左）文本方向。
实操建议：
- 直接对导航容器的
ul写padding-inline-start: 0，比padding-left: 0更可靠 - 若需全局重置，可在 CSS 重置块中加入：
ul, ol { padding-inline-start: 0; } - 别用
margin-left: -40px补偿——这属于“打补丁”，换字体或缩放后容易错位
justify-content: space-between 为什么没把菜单项推到两端
根本原因：这个属性只对 Flex 容器的**直系子元素**生效。如果导航栏结构是 ，而你只给 nav 设了 display: flex，那 ul 才是 Flex 项目，li 仍是普通块级元素，space-between 对它们完全无效。
实操建议：
- 把
display: flex和justify-content: space-between加在ul上，让li成为直系 Flex 项目 - 若需左右分组（如 Logo 左 + 菜单右），应设两级 Flex：
nav用display: flex; justify-content: space-between，内部两个ul分别作为左右容器 - 注意
flex-wrap: wrap—— 小屏下若菜单项折行，space-between会失效；此时改用justify-content: flex-start+gap更可控
用 gap 还是 margin 控制菜单项间距
gap 是现代布局的首选，但必须确认父容器是 Flex 或 Grid。直接在 ul 上写 gap: var(--space-md) 仅当 ul 是 display: flex 或 display: grid 时才生效；若仍用 display: block，gap 会被忽略。
实操建议：
- 优先用
gap：避免父子margin合并、无需考虑:first-child/:last-child特殊处理、语义清晰 - 兼容旧版（如 IE11）？只能退回到
margin-right+:not(:last-child)，但要小心响应式断点处的 margin 累加 - 统一用 CSS 变量定义间距：
gap: var(--space-sm)，后续调整只需改:root中的值，不用搜代码
vertical-align: middle 在导航链接里为什么总不对齐
因为 a 默认是 inline 元素，而 vertical-align 的“middle”是对齐到**行框中线**（line box baseline），不是容器高度中心。只要父容器有 font-size、line-height 或内联子元素尺寸不一致，就会偏移。
实操建议：
- 最稳方案：把
a包进一个span或div，设display: flex; align-items: center - 单行文字+图标场景，可用
line-height匹配容器高度，再配合vertical-align: middle，但换行即失效 - 别对
a直接设display: inline-block后加vertical-align——它仍受父级行高影响，不如 Flex 直观
真正容易被忽略的是：间距和对齐从来不是孤立属性，而是由「容器 display 类型 + 子元素参与流方式 + 文本渲染上下文」三者共同决定。改一个 gap 值前，先确认父容器是不是 Flex；调一次 vertical-align，先看子元素有没有脱离行内流。否则所有调整都是临时止痛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
