全屏弹层右侧空隙主因是页面容器横向溢出，需重置html/body的margin/padding并检查子元素溢出；弹层内部也需约束图片、文本及flex子项宽度。
全屏弹层右侧出现空隙，基本不是弹层本身的问题，而是它所在的页面容器存在横向溢出——弹层只是被“带偏”了。
检查 html 和 body 是否有默认 margin 或 padding
浏览器会给 body 加默认 margin: 8px（Chrome/Firefox 常见），这会让整个页面内容向内缩进，当弹层用 position: fixed; top: 0; left: 0; width: 100%; height: 100% 覆盖时，实际只覆盖了 width: 100% - 16px 的区域，右侧就露出空白。
- 必须加全局重置：
body { margin: 0; padding: 0; } - 更稳妥的做法是连
html一起重置：html, body { margin: 0; padding: 0; height: 100%; } - 注意：如果用了 CSS Reset 或 Normalize.css，确认它们没漏掉
body的 margin 清除
定位真实溢出源：用 scrollWidth > clientWidth 快速验证
在控制台执行：console.log(document.body.scrollWidth, document.body.clientWidth)。如果前者明显大于后者（比如 420 > 375），说明页面内容正把 body 撑宽，弹层再“全屏”也盖不住溢出部分。
- 打开 Chrome DevTools → Elements → 选中
→ 右侧 Computed → 查看width和scrollWidth - 临时给可疑子元素加
outline: 1px solid red，快速识别哪个元素伸出了视口 - 高频罪魁：未设
max-width: 100%的图片、white-space: nowrap的长文本、固定宽度的 flex 子项（没设flex-shrink: 0或min-width: 0）
弹层自身要防“继承式溢出”
即使页面主体没问题，弹层内部若含大间距、固定宽或未约束的内联内容，也会撑开弹层容器，导致它超出视口。
- 给弹层根元素加
box-sizing: border-box，避免padding或border溢出 - 若弹层用
display: flex布局，确保子项可收缩：flex: 1或显式设flex-shrink: 1; min-width: 0 - 弹层内的图片务必加
max-width: 100%; height: auto;，禁用width: 500px这类固定值 - 避免在弹层里用
margin-left: 10rem这类大偏移——小屏下直接推到视口外
真正难缠的空隙，往往藏在某个被忽略的 span 的换行符里，或一张没加 max-width 的图上。别急着给弹层加 overflow-x: hidden，先让整个页面不溢出，弹层自然严丝合缝。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
