如何删除之间的空间 <nav> 和 <header>

Question

页面顶部的<nav>栏与页面下方的<header>栏之间有很大的空隙。 我之前已经解决了这个问题，但是不记得我是怎么做到的。

<html>
<head>
    <title>Welcome</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,700" rel="stylesheet">
</head>
<body>
    <center>
        <nav>
            <ul>
                <a href="#">About Me</a>
                <a href="#">Store</a>
                <p class="thaf">Thaf</p>
                <a href="#">Contact</a>
                <a href="#">Stuff</a>
            </ul>
        </nav>
        <header>
            <p class="hello">Hello.</p>
        </header>
        <section>
            <p>Quibusdam quid ullamco voluptate. Laboris quem fabulas quibusdam qui in minim 
                ubi quorum. Quo tamen hic velit. A multos aliqua de vidisse, ea esse litteris, 
                in aute hic multos, de magna nisi nulla nescius hic ingeniis quae ut ingeniis 
                firmissimum, se fugiat quibusdam commodo id nostrud a quae excepteur, cupidatat 
                quis nostrud iudicem. Aute nescius incurreret. Qui qui fore magna magna, ab aute 
                aliqua et tempor, se quis senserit eu dolor ne ubi legam senserit.</p>
            <p>Te illum proident. Minim voluptate pariatur, non varias appellat, ubi do quid 
                consequat sed qui expetendis te commodo, nam illum cernantur, cillum proident 
                ubi offendit, veniam mentitum ubi ullamco aut quid ingeniis ubi magna amet. 
                Eiusmod labore et litteris comprehenderit e non aut illum appellat. Id sunt nisi 
                enim senserit e appellat sunt ab eiusmod voluptatibus, a tamen consectetur eu 
                malis despicationes possumus culpa litteris, ut enim sed magna, do aute aliqua 
                varias tempor qui nam sed veniam probant, ex quo exercitation. Fugiat deserunt 
                ea lorem nulla si ubi irure fidelissimae. Mandaremus dolore cillum incurreret 
                esse hic quae ita admodum ne eram a a elit singulis vidisse si anim 
                tractavissent ullamco tamen possumus se in ab legam probant, eu laboris 
                firmissimum, quamquam est deserunt non ex irure aliqua culpa offendit. Ut varias 
                eruditionem et iis fore deserunt coniunctione.</p>
        </section>
    </center>
</body>
</html>

p.thaf {
display: inline;
font-family: 'Oswald', sans-serif;
margin: 50px;
}
nav {
background-color: darkgray;
padding: 5px;
margin: 0px;
overflow: hidden;
}
a {
text-align: center;
cursor: pointer;
outline: none;
color: #000000;
border: none;
text-decoration: none;
color: inherit;
padding: 23;
font-family: sans-serif;
margin: 50;
} 
a:hover {
background-color: #666;
}
p.hello {
text-align: left;
margin-left: 400px;
font-size: 100px;
font-family: 'Oswald', sans-serif;
color: white;
}
body {
margin: 0;
color: white;
background-color: #666;
}
header {
margin: 0;
padding: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: green;
height: 500px;
}

如果您愿意，我还创建了一个JSFiddle： https ://jsfiddle.net/jy1boL8k/1/

Answer 1

增加margin: 0; 对p.hello -由于其较大的字体大小，因此p标签默认情况下会自动具有较大的margin-top ，这将添加到.header元素中。 该设置将其重置：

https://jsfiddle.net/ze8pwk1z/

Answer 2

p.hello {
    text-align: left;
    margin-left: 400px;
    font-size: 100px;
    font-family: 'Oswald', sans-serif;
    color: white;
}

您的字体大小是罪魁祸首。 对其进行更改，间隙也会相应更改。

Answer 3

为此更改您的p.hello

p.hello {
text-align: left;
margin:0px;
font-size: 100px;
font-family: 'Oswald', sans-serif;
color: white;
padding-left: 400px;
}

如何删除之间的空间 <nav> 和 <header>

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-10-14 23:48:27

解决方案2
0 2016-10-14 23:51:26

解决方案3
0 2016-10-20 20:00:50

如何删除之间的空间 <nav> 和 <header>

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-10-14 23:48:27

解决方案2 0 2016-10-14 23:51:26

解决方案3 0 2016-10-20 20:00:50

解决方案1
1 已采纳 2016-10-14 23:48:27

解决方案2
0 2016-10-14 23:51:26

解决方案3
0 2016-10-20 20:00:50