Html 如何消除页面顶部的间隙？_Html_Css

Html 如何消除页面顶部的间隙？

html css

Html 如何消除页面顶部的间隙？,html,css,Html,Css,在“container”div和页面顶部之间有一个间隙。如果我给包含的一个-20px的边距，它就消除了这个间隙，但是我正在寻找一个不需要以这种方式操作css文件的解决方案。这个缺口看起来是身体的一部分。我已经给页面的正文添加了0个填充和0个边距，但是仍然存在差距。问题在哪里集装箱背景=红色主体背景=绿色 html基本文件 {% load staticfiles %} <!DOCTYPE html> <html lang="en" class="no-js">

在“container”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>

css2:

        <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>

/* 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";
}

/* 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;
    }
}

对铬的检查显示我不知道它是什么。当我移除它时，间隙消失了。以下是快照：

如果浏览器上有检查器，则

中的标题会溢出包含它的

div

，请使用它并查看

解决方案可以是将

边际上限设置为0px

h1 {
  margin-top: 0px;
}

将“溢出”设置为“隐藏”也会起作用。

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

例如，chrome浏览器覆盖以下css

body { margin:8px }

所以，你必须这样做

body { margin:0px; }

必须将样式添加到body标记，如下所示

body{margin-top : 0px;}

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

排除故障后，我们发现原因是未关闭的元字符集标记

<meta charset="UTF-8"/>

标题通常有一个默认的上边距（它可以与父边距一起折叠）。在

h1

上尝试

margin-top:0

。您需要提供包含

container

、

clearfix

和

main

的CSS，您提供的CSS是不相关的。如果您想去掉所有不正确的边距和填充，可以在CSS文件顶部执行

*{margin:0；padding:0；}

。然而，这有一些不想要的结果（可能），因为它会删除所有填充和边距，并且您必须自己将相当多的填充和边距添加到您使用的元素中。更聪明的方法可能是重用适当的

reset.css

。如果你用谷歌搜索的话，你会发现有很多的css。我添加了第二个cssfile@junkfoodjunkie这值得一个完整的答案。我只是注意到我在这个问题上复制了两次css文件。我刚刚纠正了它，正如您所看到的，行

body，html{font size:100%；padding:0；margin:0；}

确保了这一点，但差距仍然存在。我正在使用chrome。你的html中没有body标记。用body标签包装“container”div。它在chrome中工作。@SmithLee我在基本html文件中有一个body标记。如果您熟悉django，可以扩展模板。在我的例子中，我共享的html代码位于基本html文件中的body标记之间，因此这不是我没有帮助的问题。以前也有人提到过，但这似乎不是问题所在。也许现在我得到了你想要的。是否要删除导航栏顶部的填充？我说得对吗？你们可能在试图做我从声明中理解的其他事情。如果要删除导航条顶部的空间，则必须从创建导航条的div中删除边距顶部。你能创建一个新的评论吗？请再次阅读其他评论和问题（我添加了内容）。问题不在于它看起来的填充或边距，这是由于从网站复制粘贴代码造成的。在这种情况下，最佳实践是使用浏览器检查（右键单击Chrome并选择Inspect），然后如果出现任何意外的html代码翻译，则可以可视化。因为在这种情况下，字符是不可见的，所以我使用Notepad++，Tab View/See All symbol来查找问题字符的位置。