CSS布局：移动端介绍区背景图与首段文本间异常大间距问题

异常间距的核心诱因有3个：

1. #intro设置的height: 100%无效：百分比高度需要父元素有明确高度才能生效，若未给html、body及上层容器设置固定高度，该声明不会被浏览器解析，虽然子元素.intro__container的calc(100vh - var(--header-height))能撑开容器，但背景图渲染的高度参照会出现偏差。
2. 背景尺寸设置错误：background-size: 100%等价于background-size: 100% auto，仅强制背景图宽度铺满容器，高度按原图比例自适应，移动端设备屏幕宽高比和背景图原图比例不一致时，背景图缩放后的高度会小于容器实际高度，加上背景设置了no-repeat，容器底部就会露出空隙。
3. 冗余属性+移动端视口兼容问题：vertical-align: bottom仅对行内元素、行内块元素、表格单元格生效，写在块级元素#intro上完全无效；另外移动端浏览器默认的100vh单位会把地址栏、底部工具栏高度算入视口，页面加载后工具栏收起会导致视口高度变化，进一步拉大intro区和下方区块的间距。

1. 调整#intro的样式，修正背景规则，移除无效属性：

/*========== INTRO ==========*/
#intro {
width: 100%;
/* 移除无效的height:100%，直接设置和子容器一致的最小高度 */
min-height: calc(100vh - var(--header-height));
/* 新增背景居中定位，保证图片核心区域始终显示 */
background: url(img/bg5.jpg) no-repeat center center;
/* 替换100%为cover，让背景图按比例缩放始终铺满整个容器，不会留空白 */
background-size: cover;
display: block;
/* 移除无效的vertical-align: bottom声明 */
}

如果需要完整显示背景图不被裁切，可以把background-size: cover改成background-size: contain，同时给#intro设置和背景图主色调一致的背景色，避免出现透明留白。

2. 调整.intro__container的高度规则，适配移动端动态视口：

.intro__container{
  /* 优先使用动态视口单位dvh，自动适配移动端地址栏收起/展开的高度变化，兜底用vh兼容旧浏览器 */
  height: calc(100dvh - var(--header-height));
  height: calc(100vh - var(--header-height));
  align-content: center;
}

3. 若调整后仍有细微间距，全局重置浏览器默认样式，清除元素默认margin：

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

/* 清除section默认外边距 */
.section {
  margin: 0;
}

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