CSS - 页面顶部和左侧的空白区域答案

【问题标题】：CSS - White space around top and left of pageCSS - 页面顶部和左侧的空白区域
【发布时间】：2015-11-09 05:52:04
【问题描述】：

我正在构建一个网络应用程序，不幸的是我在页面的顶部和左侧有一个白色边框。我已将 html 和 body padding 和 margin 设置为 0px，但它似乎对它没有任何影响。主体内部是一个 iframe，当我预览网站并继续检查元素时，它显示填充在主体上...

这是代码 - 如果有人能看一下，那就太好了！

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
    <title>index</title>
    <style>
        html {
            height:100%;
        }
        body {
            background-color: #FFFFFF;
            margin: 0px !important;
            padding: 0px !important;
            height:100%;
        }

    </style>

    <!-- copy these lines to your document head: -->

    <meta name="viewport" content="user-scalable=yes, width=320" />

    <!-- end copy -->

  </head>
  <body>

    <!-- copy these lines to your document: -->

    <div id="index_hype_container" style="margin:auto;position:relative;width:100%;height:100%;overflow:hidden;" aria-live="polite">
        <script type="text/javascript" charset="utf-8" src="index.hyperesources/index_hype_generated_script.js?4823"></script>
    </div>

    <!-- end copy -->


  </body>
</html>

JSFiddle

【问题讨论】：

你能发一个JSFiddle 显示错误在哪里吗？
Iframe 不继承其父文档样式表。也许您看到的是 iframe 的正文边距
@joe_young 这里：jsfiddle.net/g3edyohc 你可以在输出中看到白色边框
@rzr 好的，有什么建议可以让它完全填满吗？
您是否将 iframe 边距和框架边框设置为零？例如：iframe frameborder="0" marginheight="0" marginwidth="0"

标签： html css

【解决方案1】：

尝试将#my-iframe 的边距设置为负数，例如-10px:

#my-iframe {
    width: 100vw;
    height: 100vh;
    border: 0;
    padding: 0;
    margin: -10px;
}

这可能会切断 iframed 网站的一个小部分，但从网站的外观判断，边缘几像素不会造成太大的损害。

【讨论】：

我一直在玩这个，直到我发现 -8px 是正确的值:)