ul默认padding-inline-start:40px导致左侧空隙，需显式设为0；inline-block间隙源于HTML空白字符，可用font-size:0或flex+gap解决；gap仅在flex/grid容器生效；header-nav间空隙多因ul/h4默认margin，应针对性重置。
ul 默认 padding-inline-start 导致左侧空隙
浏览器给 ul 设了 padding-inline-start: 40px，不是 bug，是规范行为。哪怕你写了 padding: 0 或 padding-left: 0，只要没碰 padding-inline-start，左侧那块“看不见的空白”就还在。
实操建议：
- 直接写
ul { padding-inline-start: 0; }，比padding-left: 0更可靠，且兼容 RTL（从右向左）文本 - 如果导航嵌在
nav里，优先作用于nav ul，避免全局污染 - 别用
margin-left: -40px补偿——字体缩放、字号变更后会错位
inline-block 导航项间 4px 间隙怎么清
源码换行 → 浏览器解析出空格节点 → 渲染为约 4px 间隙（受父容器 font-size 影响）。这不是 margin，也不是 padding，是字符级渲染结果。
实操建议：
- 急救方案：
nav ul { font-size: 0; }+nav li { font-size: 14px; }（必须重设子元素字号，否则文字消失） - 长期推荐：
nav ul { display: flex; gap: 12px; }—— flex 天然忽略 HTML 源码空白，gap控制间距更干净 - 临时绕过：把所有
li写在同一行，或用注释“吃掉”空白（- Home
- About
gap 无效？先确认父容器是不是 Flex/Grid
gap 只在 display: flex 或 display: grid 容器下生效。如果你给一个 display: block 的 ul 写了 gap: 8px，它会被完全忽略，浏览器连 warning 都不报。
实操建议：
- 检查开发者工具 Elements 面板，看该
ul的 computeddisplay值是否真是flex或grid - 别只给
nav设display: flex就以为li有gap——gap必须加在ul上，让li成为直系 Flex 项目 - 旧版浏览器（如 IE11）不支持
gap，需降级为li:not(:last-child) { margin-right: 8px; }，但要注意响应式断点处 margin 累加风险
header 与 nav 之间莫名有空隙
空隙通常不是 header 或 nav 自己的 margin，而是它们内部的 ul 或标题（如 h4）带的默认外边距“溢出”导致的。比如 ul 默认有 margin-top: 1rem，它会从 nav 顶部撑开一段视觉空白。
实操建议：
- 针对性重置：
nav ul { margin: 0; padding-inline-start: 0; } - 别只写
header { margin-bottom: 0; }或nav { margin-top: 0; }，这解决不了根本问题 - 若用
flex-direction: column布局header和nav，必须显式设flex-direction: column，否则justify-content在水平主轴下对垂直间距无效 - 用开发者工具高亮盒模型，看蓝色区域（margin）到底来自哪一层——90% 的情况，根源在
ul或h4
真正难处理的，是那些“没写任何 margin/padding 却仍有空隙”的情况。它们往往藏在默认样式里，且不同浏览器表现略有差异。每次遇到，优先打开 DevTools → Elements → 选中元素 → 看右侧 Styles 面板里哪些属性是浏览器 UA 样式（灰色小字），再针对性覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
