CSS中main元素偏移后出现多余白色块问题求助

你给main用position: relative设置top:5vh和left:5vh时，relative定位的元素只是视觉上偏移，它在文档流里的原始位置会保留空白，这就是你看到的白色块的来源。

方案1：用margin替代top/left（推荐） #

relative定位的偏移会留空白，换成margin就能避免这个问题，同时调整宽度保证蓝色块不会超出视口：

main {
  position: relative;
  width: calc(100vw - 10vh); /* 左右各偏移5vh，宽度减去10vh */
  height: 90vh;
  z-index: 1;
  margin: 5vh 0 0 5vh; /* 上、左margin替代top和left */
  background-color: blue;
  border-radius: 25px;
}

方案2：改用absolute定位 #

absolute定位会脱离文档流，不会留下原始位置的空白，记得给body加relative让它相对于body定位：

body {
  overflow-x: hidden;
  position: relative; /* 新增，让absolute元素相对于body定位 */
}

main {
  position: absolute; /* 替换relative为absolute */
  width: calc(100vw - 10vh);
  height: 90vh;
  z-index: 1;
  top: 5vh;
  left: 5vh;
  background-color: blue;
  border-radius: 25px;
}

方案3：给body设置和背景一致的样式（治标） #

如果不想改main的定位，直接给body设置和背景相同的渐变，掩盖空白：

body {
  overflow-x: hidden;
  background: linear-gradient(to right, black 50%, var(--red) 50%); /* 新增 */
}

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