如何消除页面顶部的空白？答案

【问题标题】：How can I remove the gap from the top of page?如何消除页面顶部的空白？
【发布时间】：2017-01-03 23:57:06
【问题描述】：

“容器”div 和页面顶部之间有一个间隙。如果我给包含的 -20px 边距，它会消除间隙，但我正在寻找一种不需要以这种方式操作 css 文件的解决方案。缝隙看起来是身体的一部分。我给页面的主体提供了 0 填充和 0 边距，但差距仍然存在。问题出在哪里？

容器背景=红色

主体背景=绿色

html 基础文件

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Google</title>
        <meta name="description" content="Blueprint: Horizontal Drop-Down Menu" />
        <meta name="keywords" content="horizontal menu, microsoft menu, drop-down menu, mega menu, javascript, jquery, simple menu" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" type="image/png" href="{{STATIC_URL}}/favicon.ico"/>      
        <link type="text/javascript" href="{% static 'MMR/js/topnavbar.js' %}">

        <!-- top nav scripts-->

    </head>

    <body>
        {% include 'MMR/topnavbar.html' %}

        {% block content %}
        {% endblock %}

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="static/MMR/js/cbpHorizontalMenu.min.js"></script>
        <script>
            $(function() {
                cbpHorizontalMenu.init();
            });
        </script>
    </body>
</html>

html 扩展：

        <head>
            <link rel="stylesheet" type="text/css" href="{% static 'MMR/css/topnav-default.css' %}">
            <link rel="stylesheet" type="text/css" href="{% static 'MMR/css/topnav-component.css' %}">
        </head>

        <div class="container">
            <header class="clearfix">
                <!--<span>Tagline</span>-->
                <h1>Application</h1>
                <nav>
                    <a href="http://tympanus.net/Blueprints/FullWidthImageSlider/" class="icon-arrow-left" data-info="previous Step">Previous Blueprint</a>
                    <a href="http://tympanus.net/codrops/?p=14426" class="icon-drop" data-info="Next Step">back to the Codrops article</a>
                </nav>
            </header>   

            <div class="main">
                <nav id="cbp-hrmenu" class="cbp-hrmenu">
                    <ul>
                        <li>
                            <a href="#">Products</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Downloads</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner">
                                    <div>
                                        <h4>Education &amp; Learning</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Applications</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                        </ul>
                                        <h4>Utilities</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                    <div>
                                        <h4>Education</h4>
                                        <ul>
                                            <li><a href="#">Learn Thai</a></li>
                                            <li><a href="#">Math Genius</a></li>
                                            <li><a href="#">Chemokid</a></li>
                                        </ul>
                                        <h4>Professionals</h4>
                                        <ul>
                                            <li><a href="#">Success 1.0</a></li>
                                            <li><a href="#">Moneymaker</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>
                        <li>
                            <a href="#">Projects</a>
                            <div class="cbp-hrsub">
                                <div class="cbp-hrsub-inner"> 
                                    <div>
                                        <h4>Learning &amp; Games</h4>
                                        <ul>
                                            <li><a href="#">Catch the Bullet</a></li>
                                            <li><a href="#">Snoopydoo</a></li>
                                            <li><a href="#">Fallen Angel</a></li>
                                            <li><a href="#">Sui Maker</a></li>
                                            <li><a href="#">Wave Master</a></li>
                                            <li><a href="#">Golf Pro</a></li>
                                        </ul>

                                    </div>
                                    <div>
                                        <h4>Entertainment</h4>
                                        <ul>
                                            <li><a href="#">Gadget Finder</a></li>
                                            <li><a href="#">Green Tree Express</a></li>
                                            <li><a href="#">Green Tree Pro</a></li>
                                            <li><a href="#">Holy Cannoli</a></li>
                                            <li><a href="#">Wobbler 3.0</a></li>
                                            <li><a href="#">Coolkid</a></li>
                                        </ul>
                                    </div>
                                </div><!-- /cbp-hrsub-inner -->
                            </div><!-- /cbp-hrsub -->
                        </li>

                    </ul>
                </nav>
            </div>

        </div>

css 1：

/* General Demo Style */

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {
    font-family: 'fontawesome';
    src:url('../fonts/fontawesome.eot');
    src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
        url('../fonts/fontawesome.svg#fontawesome') format('svg'),
        url('../fonts/fontawesome.woff') format('woff'),
        url('../fonts/fontawesome.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html { font-size: 100%; padding: 0; margin: 0;}

/* Reset */
*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}


body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}

a {
    color: #f0f0f0;
    text-decoration: none;
}

a:hover {
    color: #000;
}

.container{
    background-color:red;
    padding-top:0px;
}
.container > header {
    width: 90%;
    max-width: 70em;
    margin: 0 auto; /* remove auto to push the h1 text to left*/
    padding: 0 0.5em 0.5em 0.5em;   
    background-color:yellow;

}

/* Brand Name Text */
.container > header h1 {
    font-size: 1.5em;
    line-height: 1.3;
    margin: 0;
    float: left;
    font-weight: 400;
    margin-top:0;
}

.container > header span {
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    padding: 0 0 0.1em 0.1em;
}

.container > header nav {
    float: right;
}
/* next previous icons*/
.container > header nav a {
    display: block;
    float: left;
    position: relative;
    width: 2.5em;
    height: 2.5em;
    background: #fff;
    border-radius: 50%;
    color: transparent;
    margin: 0 0.5em;
    border: 4px solid #47a3da;
    text-indent: -8000px;
}

/* after click next previous icons*/
.container > header nav a:after {
    content: attr(data-info);
    color: #47a3da;
    position: absolute;
    width: 600%;
    top: 120%;
    text-align: right;
    right: 0;
    opacity: 0;
    pointer-events: none;
}

.container > header nav a:hover:after {
    opacity: 1;
}
/* hover next previous icons*/
.container > header nav a:hover {
    background: #47a3da;
}

.icon-drop:before, 
.icon-arrow-left:before {
    font-family: 'fontawesome';
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    speak: none;
    font-style: normal;
    font-weight: normal;
    line-height: 2;
    text-align: center;
    color: #47a3da;
    -webkit-font-smoothing: antialiased;
    text-indent: 8000px;
    padding-left: 8px;
}

.container > header nav a:hover:before {
    color: #fff;
}

.icon-drop:before {
    content: "\e000";
}

.icon-arrow-left:before {
    content: "\f060";
}

CSS 2：

/* menu separator */
.cbp-hrmenu {
    width: 100%;
    margin-top: 0em;
    border-bottom: 4px solid #47a3da;
}

/* general ul (div of tabs) */
.cbp-hrmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: none;

}

/* first level ul style (div of tabs)*/
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 70em;
    margin: 0 auto; /*remove auto to push tabs to left*/
    padding: 0 1.875em;

}
/* tabs individually + the menu that drops*/
.cbp-hrmenu > ul > li {
    display: inline-block;
}

/* link (text) of tabs */
.cbp-hrmenu > ul > li > a {
    font-size:1.1em;
    font-weight: 700;
    padding: 0.1em 1em; /* height of tabs*/
    color: #999;
    display: inline-block;
    border-radius:0.5em 0.5em 0em 0em;

}
/* hover tabs' text */
.cbp-hrmenu > ul > li > a:hover {
    color: #47a3da;
    transition: color 0.2s linear;

}

/* links inside the drop down menu */
.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #fff;
    background: #47a3da;
}

/* sub-menu (the one that drops and contains options)*/
.cbp-hrmenu .cbp-hrsub {
    display: none;
    position: absolute;
    background: #47a3da;
    width: 100%;
    left: 0;
}

.cbp-hropen .cbp-hrsub {
    display: block;
    padding-bottom: 3em;
}

.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
}

.cbp-hrsub h4 {
    color: #afdefa;
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries */

@media screen and (max-width: 52.75em) { 

    .cbp-hrmenu {
        font-size: 80%;
    }

}

@media screen and (max-width: 43em) { 

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #47a3da;
    }

    .cbp-hrmenu > ul > li > a { 
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub { 
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 36em) { 
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
}

在 Chrome 上的检查显示了一个我不知道它是什么的部分。当我删除它时，间隙就消失了。这是快照：

【问题讨论】：

标题通常有一个默认的上边距（它可以与父边距一起折叠）。在h1 上尝试margin-top: 0。
你需要提供包含container、clearfix和main的CSS，你提供的那个无关。
如果你想去掉所有令人讨厌的边距和填充，你可以在 CSS 文件的顶部做* { margin: 0; padding: 0; }。但是，这会产生一些不需要的结果（可能），因为它会删除所有填充和边距，并且您必须自己添加相当多的内容到您使用的元素中。更聪明的方法可能是重用正确的reset.css。如果你用谷歌搜索的话，周围有很多。
我添加了第二个css文件
@junkfoodjunkie 值得完整回答。

标签： html css

【解决方案1】：

您必须将样式添加到 body 标签中，如下所示

body{margin-top : 0px;}

这将覆盖浏览器的默认属性。你可以看到browser default css 因此，您可以覆盖这些默认属性中的任何一个来实现自定义设计。

【讨论】：

它没有帮助。其他人之前也提到过，但似乎不是问题。
可能现在我得到了你想要的。您想从导航栏顶部删除填充？我说的对吗？
您可能正在尝试做其他事情，正如我从声明中所理解的那样。如果要从导航栏顶部删除空间，则必须从创建导航栏的 div 中删除边距顶部。你能创建一个jsfiddle
请再次阅读其他 cmets 和问题（我添加了一些东西）。问题不在于它看起来的填充或边距

【解决方案2】：

在故障排除和looking for hidden or erroneous UTF characters 之后，我们发现原因是未关闭的元字符集标签。

<meta charset="UTF-8"/>

【讨论】：

这是由于从网站复制粘贴代码造成的。在这种情况下，最好的做法是使用浏览器检查（右键单击 Chrome 并选择检查），然后如果有任何意外的 html 代码翻译可以可视化。由于在这种情况下字符是不可见的，我使用 Notepad++、选项卡视图/查看所有符号来查找有问题的不需要的位置。

【解决方案3】：

您在<h1> 中的标题溢出了包含它的div，如果您的浏览器上有检查员，请使用它并查看<h1>。

解决方案可能是将<h1> 上边距设置为 0px。

h1 {
  margin-top: 0px;
}

将<header> 溢出设置为隐藏也应该可以。

【讨论】：

【解决方案4】：

某些浏览器会覆盖其默认样式表。

例如chrome浏览器覆盖下面的css。

body { margin:8px }

所以，你必须这样做。

body { margin:0px; }

【讨论】：

我刚刚注意到我在这个问题上复制了两次 css 文件。我刚刚纠正了它，你可以看到body, html { font-size: 100%; padding: 0; margin: 0;} 确保这一行，但差距仍然存在。我正在使用 chrome。
您的 html 中没有 body 标签。用 body 标签包裹你的“容器”div。它适用于 chrome。
@SmithLee 我在基本 html 文件中有一个 body 标签。如果你熟悉 django，你可以扩展你的模板。在我的情况下，我共享的 html 代码位于基本 html 文件中的 body 标记之间，因此这不是问题