摆脱 iframe 正文默认边距

Posted 2023-02-16

【中文标题】摆脱 iframe 正文默认边距

【英文标题】：get rid of iframe body default margin

【发布时间】：2016-09-05 05:54:11

【问题描述】：

我正在嵌入来自第三方网站的 iframe。我无法控制它，所以除了宽度和高度（可以是绝对值或百分比值）之外，我无法更改 iframe 内的任何内容。

我希望 iframe 内容具有响应性，因此我将容器的 CSS 宽度和高度设置为 100%，并且 iframe 本身具有完整大小的 div（相同的 100%/100%）。问题是浏览器为 iframe 的主体添加了默认的 8px 边距，因此出现了水平滚动条。当我使用开发工具禁用此边距时，一切正常。

澄清这不是 iframe 边距。内部文档body 元素的默认边距由浏览器设置为 8px。

有没有办法摆脱默认边距？显然 CSS 无法控制 iframe，我很确定 JS 也不会在另一个域上工作。 它适用于固定高度，例如我将 600 设置为 iframe 高度，将 616 设置为容器，但我希望它可以动态更改。

【问题讨论】：

iframe body remove space的可能重复

不，它不是重复的。这个是关于 iframe 内部的空间；另一个有点不清楚，但我认为是关于外面的空间。

【参考方案1】：

尝试将box-sizing: border-box 添加到 iFrame 规则 - 这应该会将边距整合到 100% 中。

【讨论】：

是否可以在 iframe 之外以某种方式设置它？我无法控制它，所以我不能把它放在里面。

我的意思是，对于放置 iframe 的容器。或者也可以使用 #container > iframe box-sizing: border-box; 或类似的规则

抱歉，这似乎不起作用。我尝试为容器和 iframe 本身设置它。我认为问题也出在 iframe 内容上，它还有一个 100% 高度的 div，包含 SWF 对象。 iframe 和容器都没有边距，它是内部文档有一个。

你可以尝试的另一件事是`iframe body margin: 0; ，以防万一那里有通常的默认页边距 - 但我不确定这是否可行。

这正是我的问题，默认的正文边距。但是似乎无法在 iframe 之外覆盖它