浏览器默认为body设置margin: 8px，导致视口左右各出现8px白边；必须重置body { margin: 0; padding: 0; }，优先用width: 100%而非100vw，并处理img inline间隙等问题。
白边不是图片或容器的错，而是浏览器默认行为叠加盒模型计算偏差的结果；直接加 overflow-x: hidden 只是掩盖问题，必须从 body 重置、宽度单位选择、图片渲染机制三处同步处理。
为什么 body 默认 margin 会制造白边
几乎所有浏览器会给 body 加 margin: 8px，哪怕你没写任何 CSS。这个固定像素值不会随视口缩放，但在手机上被放大后，左右各 8px 就变成肉眼可见的“白边”。它作用于整个文档流，所以即使 section 自身 margin: 0，也挡不住这层外推力。
实操建议：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 在 CSS 最开头强制重置：
body { margin: 0; padding: 0; } - 别只清
margin忽略padding，某些 CMS 或编辑器模板会偷偷加padding - 用
* { outline: 1px solid red !important; }快速定位哪个元素真正顶到视口边缘
width: 100vw 和 width: 100% 哪个更安全
width: 100vw 看似精准，但它是按视口宽度计算，不扣除 body 的默认 margin，也不考虑滚动条宽度（尤其在 Windows 上），实际总宽很容易超 window.innerWidth。而 width: 100% 基于父容器计算，天然绕过这些干扰。
实操建议：
- 响应式全宽容器优先用
width: 100%，配合margin: 0 auto - 若必须用
vw（比如要撑满含滚动条的视口），搭配box-sizing: border-box和显式减法：width: calc(100vw - 16px) - 运行
document.body.scrollWidth > window.innerWidth在控制台验证是否真有横向溢出
img 底部间隙怎么彻底干掉
img 默认是 inline 元素，浏览器会为它预留基线（baseline）下方的空间——这是给字母 “g”“y” 留的 descender 区域，导致图片底部出现约 3–4px 的不可见间隙。这个间隙在深色背景或带边框的容器里特别扎眼。
实操建议：
- 最通用解法：
img { display: block; }，块级元素不参与行内排版，间隙归零 - 需保留内联特性时（如和文字混排），用
vertical-align: top或middle，但注意它对display: block无效 - 别用
font-size: 0清除 inline 间隙却忘记给img单独设font-size: initial，否则图片可能消失
flex 居中时 align-items 不生效的常见原因
align-items: center 要起作用，前提是父容器有明确的高度参照。如果只写 display: flex; justify-content: center; align-items: center; 却没设高度，浏览器不知道“中心”在哪——因为子元素高度未定，父容器高度塌陷为 0。
实操建议：
- 全屏居中用
height: 100vh；内容区居中用min-height: 50vh或具体像素值（如min-height: 400px） - 避免用
height: 100%，它依赖上级容器有显式高度，链路一断就失效 - 图片自身必须加
max-width: 100%和height: auto，否则宽屏下溢出、窄屏下拉伸，破坏居中前提
真正难处理的不是单点样式，而是多个默认行为叠加后的连锁反应：body 的 margin、img 的 inline 特性、vw 的计算逻辑、flex 的高度依赖——漏掉任意一环，白边就会以不同形态复现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
