如何去除导航栏(nav bar)与横幅图片(banner pic)之间的空白间距

算力阿峰

2026-10-21

空白原因

浏览器默认样式问题：导航栏内的<p>标签、横幅内的<h1>标签都有浏览器默认赋予的上下外边距，未主动重置就会产生额外占位
外边距穿透（塌陷）问题：横幅容器#header3未触发BFC（块级格式化上下文），内部<h1>的上外边距会穿透父容器，直接作用在容器外部，表现为导航和横幅之间的空隙
额外注意：当前HTML结构不符合规范，<ul>的直接子元素只能是<li>，你把<div class="dropdown">直接放在<ul>下，也可能引发异常渲染间隙

解决方案

方案1：全局样式重置（推荐，可避免后续同类默认样式问题）

在CSS文件最顶部添加如下代码：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

同时修改#header3的样式，新增overflow: hidden触发BFC解决margin穿透：

#header3 {
  height: 300px;
  background-image: url('../images/banner3.jpg');
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  width: 100%;
  overflow: hidden; /* 新增该行 */
}

方案2：单独修改对应元素样式（无需全局修改）

取消导航栏<p>标签的默认外边距，修改现有#nav p样式：

#nav p {
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0; /* 新增该行 */
}

解决margin穿透问题，修改#header3样式并重置内部h1的上外边距：

#header3 {
  height: 300px;
  background-image: url('../images/banner3.jpg');
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  width: 100%;
  overflow: hidden; /* 新增该行 */
}

#headertext h1 {
  margin-top: 0; /* 新增该行，取消h1默认上外边距 */
}