我正在构建一个Web应用程序,但不幸的是,页面顶部和左侧周围都有白色边框。我已经将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

最佳答案

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

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


这可能会切断iframed站点的一小部分,但是从站点的外观来看,边缘边缘只有几个像素不会造成太大损害。

关于html - CSS-页面顶部和左侧的空白,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32036062/

10-11 06:50