React中两个Div元素间莫名空白间隙问题求助

以下是几个针对性的解决思路，按优先级排查：

1. 清除浏览器默认样式并修正图片布局 #

浏览器默认会给body、html添加margin，同时img作为行内块元素，会和基线对齐产生底部间隙。先给全局样式加上：

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

html, body {
  height: 100%;
  overflow-x: hidden;
}

/* 全屏图样式 */
.hero-image {
  display: block; /* 消除行内块元素的底部间隙 */
  width: 100%;
  height: 100vh; /* 强制占满视口高度 */
  object-fit: cover; /* 保持图片比例，填满容器不拉伸 */
}

2. 检查全屏图容器的高度与溢出设置 #

如果你的全屏图是用div包裹的，确保容器没有额外的padding/margin，同时阻止内容溢出：

// 首页Hero组件示例
const Hero = () => {
  return (
    <div className="hero-container">
      <img src="/your-hero-image.jpg" alt="首页全屏图" className="hero-image" />
    </div>
  );
};

对应的容器CSS：

.hero-container {
  width: 100%;
  height: 100vh;
  overflow: hidden; /* 防止图片溢出产生滚动或间隙 */
}

3. 修复垂直外边距折叠问题 #

如果「关于我」板块的顶部有margin-top，会和上方容器的底部产生垂直外边距折叠，导致空白。可以用两种方式解决：

• 给「关于我」板块用padding-top替代margin-top：

.about-section {
  padding-top: 0; /* 替换原有的margin-top: 0 */
  background-color: #f0f0f0; /* 仅给该板块设置灰色背景 */
}

• 给上方的全屏图容器添加overflow: hidden，阻止外边距折叠：

.hero-container {
  /* 其他样式 */
  overflow: hidden;
}

4. 精准设置背景色 #

不要直接给body设置灰色背景，只给「关于我」及下方需要的板块单独设置，这样首页图片区域的背景不会被影响：

.about-section, .contact-section { /* 按需添加其他板块 */
  background-color: #f0f0f0;
}

按这个顺序排查，基本能解决无缝衔接且无重叠的问题。

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