HTML 元素默认样式（尤其是 的上下外边距）是导致 header 和 nav 间出现不可见间隙的主因；通过重置 ul { margin: 0; } 或全局归零可精准解决。

html 元素默认样式（尤其是 `

` 的上下外边距）是导致 header 和 nav 间出现不可见间隙的主因；通过重置 `ul { margin: 0; }` 或全局归零可精准解决。

在网页布局中，看似“无样式”的

与
之间突然出现一段空白，常让初学者困惑——即使已为两者显式设置 margin: 0，间隙依然存在。根本原因并非 header 或 nav 自身，而是其内部嵌套的
元素
：浏览器对无序列表 ul 应用了默认的 margin-top: 1rem 和 margin-bottom: 1rem（通常为 16px），该外边距会从
内部向下“溢出”，视觉上表现为 header 与 nav 之间的空隙。

✅ 正确解决方案是针对性重置

的外边距：

nav ul {
  margin: 0; /* 关键：清除 ul 默认上下外边距 */
  padding-left: 0; /* 保持原有设置，避免项目符号缩进 */
}

⚠️ 注意：仅设置 header { margin-bottom: 0; } 或 nav { margin-top: 0; } 是无效的，因为问题根源在

，而非父容器。

? 进阶建议：若项目需高度可控的样式基础，推荐在 CSS 开头添加CSS 重置规则（Reset），避免各类元素默认边距/填充干扰布局：

/* 全局重置（谨慎使用，确保后续所有间距均显式定义） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 同时推荐加入，统一盒模型计算 */
}

? 补充注意事项：

• 检查是否误用 标签嵌套在 外部（如示例中 出现在
  之后）——这是严重 HTML 结构错误，会导致渲染异常。正确结构应为：...

  ...

  ...。
• 避免滥用
  标签控制垂直间距，应优先使用 margin / padding 进行语义化布局。
• 使用浏览器开发者工具（F12 → Elements 面板）高亮检查元素盒模型，可直观看到哪一层级贡献了实际空白（蓝色区域为 margin）。

通过精准定位默认样式来源并针对性覆盖，即可干净、可靠地消除 header 与 nav 间的意外间隙，让导航栏紧贴页眉，实现专业级视觉连贯性。