包含img的div出现未知右侧边距导致页面横向溢出如何解决？

问题原因 #

你遇到的多余右侧间距本质是定位属性的使用错误导致的溢出：
#pfpbg设置了position: relative + left: 5%，relative定位的left属性只会让元素的视觉位置相对于自身原本的文档流位置向右偏移5%，但不会改变元素本身在文档流中占据的空间，偏移后元素超出父容器的部分就会表现为多余的右侧间距，最终导致页面横向溢出。

修复方案 #

• 替换定位偏移方案：删掉left: 5%属性，改用margin-left: 5%实现左侧间距，margin属性会直接修改元素在文档流中的占位，不会产生额外溢出。
• 修正内部img元素默认样式：给内部的img标签添加如下样式，消除inline元素默认的底部空白和宽度溢出问题：

#pfpbg img {
  display: block;
  max-width: 100%;
  height: auto;
}

• 快速验证方法：打开浏览器开发者工具的元素面板，选中#pfpbg元素查看盒模型面板，可以直接定位多余间距的来源。

修复完成后就可以移除html, body上的overflow-x: hidden设置，不会再出现横向滚动条。

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