我遇到了一个我正在处理的网站的问题，因为显然没有理由，文件顶部会出现空白（右边1 px）。我已将margin: 0; padding:0;添加到<body>和<html>，但无济于事。
当我在Chrome DevTools中检查过它时，我似乎找不到任何导致它的元素。如果我没记错的话，当没有CSS存在时也会出现。 HTML和CSS如下所示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/normalize.min.css">
</head>
<body>
<section id="sec-1">
<header>
<nav class="flo-l">
<a href="#services" class="ed">Services</a>
<a href="#contact" class="ed">Email</a> </nav>
<h1 class="lava">Hillside Insurance Agency</h1>
<nav class="flo-r">
<a href="#contact" class="ed">Phone</a>
<a href="#about" class="ed">About</a>
</nav>
</header>
<div>
<h1 class="fv">Protection, Integrity, Service.</h1>
<h2>We have the protection you need. <br>
Call or email us today.</h2>
</div>
</section>
<section id="sec-2">
<nav>
<a href="#services" class="active ed">Services</a>
<a href="#contact" class="ed">Email</a>
<a href="#contact" class="ed">Phone</a>
<a href="#about" class="ed">About</a>
</nav>
<div>
<section class="flo-l">
<h3 class="fv">Insurance we offer</h3>
<h4>Business coverage in New York and Georgia.</h4>
</section>
<section class="flo-r vertLin">
<p class="fv"><i class="fa fa-users"></i> Martial Arts Centers</p>
<p class="fv"><i class="fa fa-picture-o"></i> Museums</p>
<p class="fv"><i class="fa fa-smile-o"></i> Child Care Centers</p>
<p class="fv"><i class="fa fa-book"></i> Libraries</p>
<p class="fv"><i class="fa fa-ticket"></i> Fairs and Fairgrounds</p>
<p class="fv"><i class="fa fa-male"></i> Adult Care Centers</p>
<p class="fv"><i class="fa fa-sun-o"></i> Religious Organizations</p>
<p class="fv"><i class="fa fa-heart"></i> Yoga Studios</p>
<p class="fv"><i class="fa fa-heart"></i> Dance Studios</p>
<p class="fv"><i class="fa fa-bullhorn"></i> Gymnasiums</p>
</section>
</div>
</section>
<section id="sec-3">
<div id="contact">
<div class="flo-l">
<h3 class="fv">Email</h3>
<p>comprehensive contact</p>
<a href="mailto:hillshireagency@yahoo.com" class="contact">hillshireagency@yahoo.com</a>
<p>Get an insurance quote</p>
<p>Get in touch via the internet and get a quote on insurance for your business</p>
</div>
<div class="flo-r">
<h3 class="fv">Phone</h3>
<p>personal contact</p>
<h3>315-747-4544</h3>
<p>Get an insurance quote</p>
<p>Get in touch via the internet and get a quote on insurance for your business</p>
</div>
<div class="flo-bottom"><h3>Let us protect you, so you can focus on your business.</h3></div>
</div>
</section>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src='//www.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
CSS：
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/***************
Webfonts:
***************/
@font-face {
font-family: 'edmondsans';
src: url('edmondsans-regular-webfont.eot');
src: url('edmondsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('edmondsans-regular-webfont.woff') format('woff'),
url('edmondsans-regular-webfont.ttf') format('truetype'),
url('edmondsans-regular-webfont.svg#edmondsans') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'fairview';
src: url('fairview_regular-webfont.eot');
src: url('fairview_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fairview_regular-webfont.woff') format('woff'),
url('fairview_regular-webfont.ttf') format('truetype'),
url('fairview_regular-webfont.svg#fairview') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'lavanderia';
src: url('lavanderia_regular-webfont.eot');
src: url('lavanderia_regular-webfont.eot?#iefix') format('embedded-opentype'),
url('lavanderia_regular-webfont.woff') format('woff'),
url('lavanderia_regular-webfont.ttf') format('truetype'),
url('lavanderia_regular-webfont.svg#lavanderia') format('svg');
font-weight: normal;
font-style: normal;
}
/***************
Content:
***************/
/* Floats: */
.flo-l {
float: left;
}
.flo-r {
float: right;
}
.center {
margin: 0 auto;
}
/* Font settings: */
.ed {
font-family: "edmondsans", sans-serif
}
.fv {
font-family: "fairview", sans-serif
}
.lava {
font-family: "lavanderia", sans-serif
}
/* Sections: */
#sec-1 {
min-width:960px;
height: 438px;
background-image: url(../images/headbg.jpg);
background-repeat: no-repeat;
background-color: #EEE;
background-size: cover;
}
#sec-2 {
margin: 0 auto;
min-width: 960px;
height: 419px;
}
#sec-3 {
margin: 0 auto;
min-width: 960px;
height: 418px;
background: #375e00; /* Old browsers */
background: -moz-linear-gradient(top, #375e00 0%, #0f3201 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#375e00), color-stop(100%,#0f3201)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #375e00 0%,#0f3201 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #375e00 0%,#0f3201 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #375e00 0%,#0f3201 100%); /* IE10+ */
background: linear-gradient(to bottom, #375e00 0%,#0f3201 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#375e00', endColorstr='#0f3201',GradientType=0 ); /* IE6-9 */
background-image: url(../images/stacked_circles.png) repeat;
}
/* Sub-sections: */
#contact {
width: 600px;
height: 300px;
/* Background Gradient: */
background: #d7d7d7; /* Old browsers */
background: -moz-linear-gradient(top, #d7d7d7 0%, #f0f0f0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7d7d7), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d7d7d7 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d7d7d7 0%,#f0f0f0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d7d7d7 0%,#f0f0f0 100%); /* IE10+ */
background: linear-gradient(to bottom, #d7d7d7 0%,#f0f0f0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */
/* Box-shadow: */
-webkit-box-shadow: inset 5px px rgba(255, 255, 190, 75);
box-shadow: inset 5px px rgba(255, 255, 190, 75);
/* Border: */
border: 1px solid black
}
/* Other: */
.vertLin {
border-left: thick solid #000;
}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 35em) {
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}
/* ==========================================================================
Helper classes
========================================================================== */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
答案 0 :(得分：1)
之前发生在我身上。我老实说我正在寻找一个更好的解决方案，但它让我非常烦恼我最终在html上使用绝对定位（或者可能是正文）并将顶部设置为0.我知道这是一个快速修复，可能不是你的意思寻找。
所以你可以尝试以下方法：
html, body {
position: absolute;
top: 0;
}
至少应该解决这个问题。
答案 1 :(得分：0)
一位朋友联系我并说这是WebKit的错。如果您检查标题中的H1，它会添加我认为0.83em与
的h1:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1
它也与H2和其他元素相同。我不知道为什么他们会这样做。他们的假设是什么？对我来说似乎很愚蠢，但我不是专家。无论如何，这是h1s的修复：
:-webkit-any(article,aside,nav,section) :-webkit-any(article,aside,nav,section) h1 {
margin: 0;
}
答案 2 :(得分：0)
您是否考虑过使用CSS重置表？我发现它消除了大部分这些挫折，并给你一个空白的状态来工作。
我倾向于使用：
答案 3 :(得分：0)
当我浮动元素并且没有正确使用clearfix时，我遇到了完全相同的问题。检查是否对包含带有float：left或float：right属性的子元素的每个元素使用clearfix。
例如：
<header class="clearfix">
<nav class="flo-l">
<a href="#services" class="ed">Services</a>
<a href="#contact" class="ed">Email</a>
</nav>
<h1 class="lava">Hillside Insurance Agency</h1>
<nav class="flo-r">
<a href="#contact" class="ed">Phone</a>
<a href="#about" class="ed">About</a>
</nav>
</header>
检查整个文档中的所有元素。我为我工作。