页面顶部空白问题：成因分析及F12无法定位的排查

1. Header与Hero区域间空白的原因 #

空白由.header元素的display: inline-block属性触发：

• inline-block元素默认采用基线对齐（vertical-align: baseline），浏览器会为其底部预留出容纳小写字母（如g、y）下伸部分的空间，即便元素内无此类字符，该留白依然存在。
• 配合body上的text-align: center，进一步触发了inline-block的行内布局特性，放大了空白的显示效果。

2. 开发者工具无法找到空白元素的原因 #

该空白并非由实体元素的margin/padding或独立空白节点产生，而是CSS布局规则（inline-block基线对齐特性）带来的虚拟布局空间，不属于DOM元素范畴，因此无法在开发者工具的元素面板中找到对应节点。

解决方案 #

方案一：调整垂直对齐方式 #

给.header添加vertical-align: top，跳过基线对齐逻辑，直接让元素顶部对齐，消除底部留白：

.header {
  display: inline-block;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.091em;
  vertical-align: top; /* 添加该属性 */
}

方案二：改用block布局 #

Header作为页面通栏区块，更适合用display: block替代inline-block，从根源上规避inline-block的布局特性问题：

.header {
  display: block; /* 替换inline-block */
  font-size: 25px;
  font-weight: 400;
  letter-spacing: 0.091em;
}

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