为什么我的 iframe 内容周围有一个空白区域？答案

【问题标题】：Why does my iframe content have an empty area around it?为什么我的 iframe 内容周围有一个空白区域？
【发布时间】：2017-03-27 22:26:01
【问题描述】：

我创建了一个 iframe 代码，希望人们将其用作其网站上的小部件。此 iframe 将加载一个具有按钮和计数器的网页。在访问的页面中，我有一个图形。

但是 iframe 在浏览器中呈现，周围有一个白色的空白区域。为什么会这样？这是我的代码：-

在客户端：

<script type="text/javascript">
    window.onload = function() {
        document.all.myframe.src = "blogup.aspx?url=" + window.location.href;
    }
</script>

<iframe id="myframe" height="75" width="235" scrolling="no" frameborder="0">
</iframe>

应该显示的页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="blogup.aspx.cs" Inherits="blogup" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
    <form id="form1" runat="server">
        <img style="float: left" src="images/blogup1.jpg" alt="Blogvani.com - Indian blogs aggregator" />
        <div style="font-family: Verdana; font-size: 16px; margin:0;padding:0;font-weight: bold; background: url('images/blogup2.jpg') no-repeat;
            height: 50; width: 44; padding: 22px 5px 5px 5px; text-align: center">
            <a href="javascript:voteup('<%= PostURL %>')" id="votecount" style="text-decoration: none;
                color: #026A88">115</a></div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server">
        <Services>
            <asp:ServiceReference Path="~/Services.asmx"             
        </Services>
    </asp:ScriptManager>

    </form>
</body>
</html>

注意：我使用的是内联 CSS。边距和内边距设置为 0，但显示的图像与顶部和左侧有一点偏移。

有什么想法吗？

【问题讨论】：

标签： html css iframe

【解决方案1】：

您可能需要从<body> 中删除填充和边距。

【讨论】：

这似乎是最有可能的问题。 html，正文 { 填充：0；边距：0； } 应该照顾它。
确保在 iframe 内显示的页面中也完成此操作
body{padding:0;margin:0;} 做到了。谢谢扎克。

【解决方案2】：

我遇到了类似的问题。空白区域是 iframe 本身中的页面。我通过在 iframe 中包含的页面的样式表中执行 margin-left:-10px; margin-top:-10px 将其删除。

【讨论】：

【解决方案3】：

试试这种风格的代码，它将删除 iframe 周围的空白空间

<style>
    iframe { display:block; }
    html, body {
        border: 0px;
        margin: 0px;
        padding: 0px;
    }
    </style>

【讨论】：

仅代码的答案质量低下，需要删除，至少应该有一两句话解释此代码的作用以及它如何回答问题。