如何消除页面顶部的空白？
Posted
技术标签:
【中文标题】如何消除页面顶部的空白？【英文标题】：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 & 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 & 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 & 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 & 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 值得完整回答。
【参考方案1】：
您必须将样式添加到 body 标签中，如下所示
bodymargin-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 标记之间，因此这不是问题以上是关于如何消除页面顶部的空白？的主要内容，如果未能解决你的问题，请参考以下文章