iframe body 删除空间答案

【问题标题】：iframe body remove spaceiframe body 删除空间
【发布时间】：2026-02-02 18:40:01
【问题描述】：

我的 iframe 样式为style="width:100%"，几乎覆盖了页面宽度。但它在左侧和右侧留下了很小的余量。所以我加了body { margin:0px; } 去掉空格。

它有效，但问题是删除<body> 上的边距会影响其他内容，例如<body> 中的段落<p>。

有没有办法只为<iframe> 消除边距？

代码：

<!DOCTYPE html>
<html>
<body>
<p> hello </p>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>

【问题讨论】：

不，它不会影响其他事情。使用css reset
@lbu 如果我使用body { margin:0px; }，那么<body>里面的段落<p>也没有边距，正好在屏幕边缘。

标签： html iframe styles width margin

【解决方案1】：

你应该这样做：

body{margin:0} // remove body margin

iframe{margin:0;width:100%}//remove iframe margin

p,div{margin:10px} //append margin to p and other tags

为您的案例演示：

<!DOCTYPE html>
<html>
<head>
<style>
    body{margin:0}
    iframe{margin:0;width:100%}
    p{margin:10px}
</style>
</head>
<body>
    <p> hello </p>
    <iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>

【讨论】：

【解决方案2】：

As you can see, you can use body{margin:0 0 0 0px;} for top, right, bottom, left. You will be able to remove all spaces from browser.

<!DOCTYPE html>
<html>
<style type="text/css">
body {
    margin:0 0 0 0px;
}
</style>
<body>
<iframe src="http://www.weather.com" style="width:100%; height:95%; margin:0px"></iframe>
</body>
</html>

【讨论】：

【解决方案3】：

有什么问题：

iframe {
  margin: 0;
}

在您的 iframe 包含页面中

【讨论】：

相信我它有效 - 如果你展示你的代码，我们会看看是否有其他东西会影响你的 css。当然，这应该在您的内框架包含页面中。
body,iframe { margin: 0 }, p { margin: 0 10px ;} - 或类似的东西，取决于您的设计要求