HTML 元素默认样式（尤其是 <ul> 的上下外边距）是导致 header 和 nav 间出现不可见间隙的主因；通过重置 ul { margin: 0; } 或全局归零可精准解决。
html 元素默认样式（尤其是 `
- ` 的上下外边距）是导致 header 和 nav 间出现不可见间隙的主因；通过重置 `ul { margin: 0; }` 或全局归零可精准解决。
在网页布局中，看似“无样式”的 <header> 与 <nav> 之间突然出现一段空白，常让初学者困惑——即使已为两者显式设置 margin: 0，间隙依然存在。根本原因并非 header 或 nav 自身，而是其内部嵌套的 <ul> 元素：浏览器对无序列表 ul 应用了默认的 margin-top: 1rem 和 margin-bottom: 1rem（通常为 16px），该外边距会从 <nav> 内部向下“溢出”，视觉上表现为 header 与 nav 之间的空隙。
✅ 正确解决方案是针对性重置 <ul> 的外边距：
nav ul {
margin: 0; /* 关键：清除 ul 默认上下外边距 */
padding-left: 0; /* 保持原有设置，避免项目符号缩进 */
}⚠️ 注意：仅设置 header { margin-bottom: 0; } 或 nav { margin-top: 0; } 是无效的，因为问题根源在 <ul>，而非父容器。
? 进阶建议：若项目需高度可控的样式基础，推荐在 CSS 开头添加CSS 重置规则（Reset），避免各类元素默认边距/填充干扰布局：
/* 全局重置（谨慎使用，确保后续所有间距均显式定义） */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 同时推荐加入，统一盒模型计算 */
}? 补充注意事项：
- 检查是否误用 <body> 标签嵌套在 <body> 外部（如示例中 <body> 出现在 <nav> 之后）——这是严重 HTML 结构错误，会导致渲染异常。正确结构应为：<html><head>...</head><body><header>...<nav>...<!-- 主要内容 --></body></html>。
- 避免滥用 <br> 标签控制垂直间距，应优先使用 margin / padding 进行语义化布局。
- 使用浏览器开发者工具（F12 → Elements 面板）高亮检查元素盒模型，可直观看到哪一层级贡献了实际空白（蓝色区域为 margin）。
通过精准定位默认样式来源并针对性覆盖，即可干净、可靠地消除 header 与 nav 间的意外间隙，让导航栏紧贴页眉，实现专业级视觉连贯性。
