设置margin:0 auto及相对定位后页面出现间隙的问题求助

问题根源在于你使用了position: relative移动两张GIF——相对定位的元素仅视觉偏移，原始占位空间仍会保留，两张GIF的初始位置会撑开页面高度，进而导致下方p元素上方出现多余间隙。

解决方案：改用绝对定位 #

将两张GIF的定位方式改为position: absolute，绝对定位元素会脱离文档流，不再占据原始空间，即可消除间隙。注意需给包裹这些图片的父容器添加position: relative，让GIF相对于父容器定位（若没有父容器，可给直接父元素如body设置，或新增一个div作为容器）。

修改后的CSS代码：

/* 新增父容器，用于定位GIF */
.finger-container {
  position: relative;
  width: /* 填写目标图片的宽度 */;
  height: /* 填写目标图片的高度 */;
  margin: 0 auto;
}

#lfinger, #rfinger {
  display: block;
  position: absolute; /* 替换为绝对定位 */
  width: 150px;
  height: 130px;
}

#rfinger {
  bottom: /* 调整为相对于父容器底部的距离 */;
  right: /* 调整为相对于父容器右侧的距离 */;
}

#lfinger {
  bottom: /* 调整为相对于父容器底部的距离 */;
  left: /* 调整为相对于父容器左侧的距离 */;
}

p {
  background-color: rgba(255,0,255,0.5);
  text-shadow: 1px 1px 10px dimgrey;
  text-align: center;
  word-spacing: 2px;
  font-family: Brush Script MT, Cursive;
  font-size: 20px;
  color: Ivory;
  padding: 10px 0;
  position: relative;
}

对应调整后的HTML结构：

<!-- 用容器包裹目标图片与两张GIF -->
<div class="finger-container">
  <img src="目标图片路径" alt="目标图片">
  <img id="lfinger" src="images/left.gif" alt="left">
  <img id="rfinger" src="images/right.gif" alt="right">
</div>
<p>你的文本内容</p>

补充说明 #

若不想新增父容器，也可直接给body设置position: relative，但此时定位会相对于整个页面，需更精准计算定位值。另外，绝对定位后margin: 0 auto不再生效，直接通过left/right/bottom/top控制位置即可。

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