iframe自身外边距实为行内基线间隙，需设display:block清除；内部白边主因是被加载页面body的margin/padding，须在源页重置或同源时JS注入清除。
iframe标签自身的外边距怎么清
iframe 元素在页面中默认会像 img 一样作为 inline 元素参与行内排版，底部会留出基线（baseline）间隙，看起来像有“下边距”——这不是 margin，是渲染行为。最直接的解法是强制它脱离行内流：display: block。
- 必须加
display: block，否则仅设margin: 0无法消除底部那几像素空白 - 如果 iframe 在 flex 或 grid 容器里，
align-items: start或justify-content: start也能间接压制对齐导致的偏移 - 别用
vertical-align: top临时顶上去——它只影响当前行盒，换行或内容变化后容易失效
iframe内部页面的 body 边距才是白边主因
95% 的“iframe 周围有白边”问题，其实出在 src 指向的那个 HTML 文件里——它的 <body> 默认带 margin: 8px。外部样式无法穿透跨域 iframe，所以你改自己页面的 CSS 没用。
- 若你能控制被嵌入页，在其内部 CSS 中写：
body { margin: 0; padding: 0; } - 同源时可用 JS 动态清除：
iframe.contentDocument.body.style.margin = '0'，但需等load事件后执行 - 跨域且无法改源页？只能靠视觉裁剪：给 iframe 外层套一层
<div style="overflow: hidden;">，并设固定宽高
旧属性 marginwidth/marginheight 还管用吗
marginwidth 和 marginheight 是 HTML4 遗留属性，目前所有主流浏览器仍支持，但属于非标准写法。它们只对同源 iframe 生效，且优先级低于 CSS；现代项目应避免使用。
- 写了也别依赖——Chrome/Firefox 已不保证行为一致，尤其在 strict mode 下可能被忽略
- 若要兼容极老系统（如 IE8），可保留，但必须配合
frameborder="0"和scrolling="no" - 真正可靠的组合是：
style="border: none; margin: 0; display: block;"
为什么加了 border: none 还有灰边
某些浏览器（尤其是 Safari 15–16、旧版 Edge）会对未显式声明边框样式的 iframe 渲染默认 2px 灰色边框，哪怕已删掉 frameborder 属性。这不是 bug，是 UA 样式表兜底行为。
立即学习“前端免费学习笔记（深入）”；
- 必须用
border: none，而不是border-width: 0—— 后者不重置border-style，UA 样式仍可能生效 - 若用了 CSS 框架（如 Bootstrap），检查是否有全局
iframe { border: 1px solid #dee2e6; }类似规则 - 加
outline: none防止聚焦时出现虚线框，但这和“默认灰边”无关，是另一回事
body margin。那个 8px 白边，从来不在你写的页面里，而在你没看过的那个远程 HTML 里。 
