当正文设置为 100% 时，部分顶部的额外 space 加上垂直滚动条

Question

这是我的页面的样子：http://puu.sh/le66k/387cc2d5e0.jpg

我给所有内容都设置了背景颜色，以帮助查看元素的边界位置。

我有一些奇怪的额外 space 想要在我的部分元素中删除（图中蓝色部分上方）。另外，我的页面上没有足够的内容来设置垂直滚动条，那为什么要有呢？

我是 HTML/CSS 的新手，所以如果这是一个愚蠢的问题，请多多包涵。

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Mini Vocaloid Wiki</title>
    <meta charset="utf-8" />
    <link href="styles.css" rel="stylesheet" />
</head>
<body>

        <nav id="topNav">
            <a href="vocaloids.html">Vocaloids</a>
            <a href="about.html">About</a>
            <a href="contact.html">Contact</a>
        </nav>

        <section id="main">
            <header>
                <p>Welcome to the Mini Vocaloid Wiki</p>
            </header>
        </section>

</body>
</html>

CSS:

body, html {
    height: 100%;
    width: 100%;
    margin: 0;
}

body {
    background-image: url('images/background_image.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#topNav {
    margin-top: 20px;
    border: 2px solid black;
    margin-left: auto;
    margin-right: auto;
    width: 66%;
    height: 40px;
    text-align: center;
    background-size: cover;
    background-position: bottom left;
    background-repeat: no-repeat;
    background-image: url('images/blurred_background.jpg');
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

nav a {
    display: inline-block;
    text-decoration: none;
    color: white;
    height: 100%;
    font-size: 20px;
    line-height: 40px;
    width: 15%;
}

#topNav a:hover {
    background-color: white;
    color: black;
}

#main {
    margin-top: 20px;
    padding: 1%;
    margin-left: auto;
    margin-right: auto;
    height: 500px;
    width: 64%;
    border: 2px solid black;
    background-color: white;
}

header {
    width: 100%;
    height: 100%;
    background-color: red;
    font-size: 50px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-align: center;
    text-shadow: 2px 2px 5px black;
}

section header p {
    background-color: blue;
}

Answer 1

您的第一段有默认边距，只需使用以下代码将其删除：

section header p {
    background-color: blue;
    margin-top: 0;
}

勾选JSFiddle

Answer 2

在您的代码中，body、nav#topnav 中的第一个元素的上边距为 20 像素。这意味着，由于边距崩溃，body 也获得了最高边距。因此，主体的总高度为 100% + 20px。

解决方法：不要在body中的第一个元素上放置边距，或者，将body的高度计算为calc(100% - 20px)。

Fiddle.

当正文设置为 100% 时，部分顶部的额外 space 加上垂直滚动条

Extra space at top of section plus vertical scroll bar when body set to 100%

html

css

scrollbar