网页中图片无法贴合浏览器左右边缘，通常是因 元素存在浏览器默认外边距（margin）所致；只需重置 body { margin: 0; } 即可彻底解决。
网页中图片无法贴合浏览器左右边缘，通常是因 `
` 元素存在浏览器默认外边距（margin）所致；只需重置 `body { margin: 0; }` 即可彻底解决。在构建首个网站时，许多初学者会遇到这样的视觉问题：明明将图片设置为 width: 100%; 或置于全宽容器中，但图片左右仍留有明显空白，无法真正“顶到屏幕边缘”。这并非图片或其父容器的样式错误，而是浏览器对 元素施加的默认样式在作祟。
现代主流浏览器（Chrome、Firefox、Safari、Edge）均默认为 设置约 8px 的外边距（margin: 8px），这是 HTML 规范兼容性历史遗留行为。该 margin 会包裹整个页面内容，导致即使图片宽度设为 100%，实际渲染区域仍被 body 的 margin 向内压缩。
✅ 正确解决方案（一行关键 CSS）：
body {
margin: 0;
}
将此规则添加至你的 CSS 文件（或 <style></style> 标签内），即可立即消除全局外边距。此时，若图片父容器（如 <header></header> 或 <div>）已设为 <code>width: 100%，且图片本身设置为：
<header> @@##@@ </header>
图片即可真正撑满视口宽度，无缝触达浏览器最左与最右边缘。
⚠️ 注意事项：
- 请确保该 CSS 规则无更高优先级的选择器覆盖（例如避免写成
section body { margin: 0; }这类无效写法）； - 若使用 CSS 重置库（如 Normalize.css 或 modern-normalize），它通常已包含
body { margin: 0; }，无需重复添加； - 仅清除
margin不够——如需图片高度也占满首屏，可额外配合min-height: 100vh;及object-fit: cover;等属性； - 建议将此类基础重置统一放在 CSS 文件最上方，作为“CSS Reset”的一部分，提升项目可维护性。
总结：这不是图片自身的尺寸问题，而是页面根容器（）的默认布局行为。掌握 margin: 0 这一最小干预手段，是迈向可控网页布局的关键第一步。
