调整字体大小后导航栏顶部出现额外空白问题求助

问题根源 #

1. 导航容器.nav使用inline-flex作为行内级容器，默认vertical-align: baseline的对齐规则，在窄屏+字体放大的场景下，会触发顶部空白。
2. 标题#heading-1采用绝对定位但未指定偏移属性，且.nav未设置position: relative，导致标题以body为定位参考，窄屏时易出现位置偏移。

修复代码 #

CSS 部分

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: cadetblue;
}

.nav {
  width: 100%;
  height: 5vw;
  display: flex; /* 替换inline-flex为flex，消除行内元素基线对齐问题 */
  align-items: center;
  position: relative; /* 为绝对定位子元素提供定位参考 */
}

#heading-1 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 0; /* 固定标题在导航栏顶部 */
  left: 0; /* 固定标题在导航栏左侧 */
  color: white;
  background-color: rgb(53, 53, 53);
  height: 5vw;
  font-size: 3vw;
  z-index: 1; /* 确保标题在按钮下方，避免遮挡交互 */
}

#a-1 {
  color: white;
  display: inline-flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  background-color: rgb(40, 89, 194);
  margin: 0 0 0 1vw;
  border-radius: 3px;
  border: 0.15vw solid rgb(189, 189, 189);
  padding: 0 1vw;
  font-size: 1.5vw; /* 按需调整字体大小，此处示例放大 */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  height: 2.5vw;
  z-index: 2; /* 确保按钮在标题上方，保证可点击 */
}

HTML 部分

<div class="nav">
  <h1 class='nav-elements' id="heading-1">Code Craze Course</h1>
  <a class="nav-elements" id="a-1" href="google.com">Enroll Now</a>
</div>

关键修复点说明 #

• 替换inline-flex为flex：将导航容器改为块级弹性容器，彻底消除行内元素基线对齐导致的顶部空白。
• 设置导航容器为定位参考：通过position: relative让绝对定位的标题始终以导航栏为基准，避免跨屏幕尺寸的位置偏移。
• 固定标题偏移：top: 0和left: 0确保标题完全贴合导航栏边缘，不会出现错位。
• 层级控制：z-index保证按钮在标题上方，避免交互元素被遮挡。

内容的提问来源于stack exchange，提问作者Yash