网站页面顶部有空白区域答案

【问题标题】：There is blank space present at the top of website page网站页面顶部有空白区域
【发布时间】：2017-12-10 05:05:24
【问题描述】：

我正在创建一个网页。即使我添加了 margin:0px 和 padding:0px 仍然有一些空白区域出现在我的网页顶部。这是我的正文部分的 css 代码。任何解决方案？提前谢谢..

<html >
    <head>
       <style>

        html {
          margin: 0;
          padding: 0;
        }
        #navR
        {float:right;
        margin-right:0px;
        }
        #mR{
        float: right;
        }
        .bodyl{
         height: 100%;  
        background-color: #F8FADE;
        font-family: Arial;
        font-size:15px;
        margin:0px;
        top: -22px; 
         clear: both;
        }
        .local{
            background-color:#DEB887;
            margin-left:0px;
            margin-right:0px;
            margin-top:0px;
            margin-bottom:0px;
            padding:0px;
            width:100%;
            vertical-align: baseline;
            }
            .heading{
            font-size: 250%;
            color:#5B3205;
            margin-top:10px;

            font-style: oblique;    
        }
        </style>
    </head>
    <body>
         <div class="local">
            <p id="mR"><strong>My name</strong></p>
            <h3 id="navR"> <a>logout</a> </h3>
            <h1 class="heading">My space</h1>
        </div> </br>
            </body>
        </html>

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好是在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example
top: -22px 可能是个问题。是不是顶部有 22 像素左右的空白？

标签： html css web

【解决方案1】：

您正在使用<h1> 标签。此文本具有由浏览器设置的默认边距。您可以在 .heading 类中设置 margin-top: 0px。这将解决问题。

编辑：在您的情况下，您应该将 margin-top: 10px 替换为 margin-top: 0px

【讨论】：

【解决方案2】：

请将您的 html 属性的边距设置为 0

body, html {
  margin: 0;
  padding: 0;
}

那么它应该非常适合你，就像它对我一样。您也可能有一个具有一定边距的子属性，因此它可能会导致该空白。

【讨论】：