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 }元件。该设置重置它：

How can we add image in UITableView section header using swift?

Answer 2

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

你的字体大小是罪魁祸首。改变它，差距会相应改变。

Answer 3

change your p.hello for this

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

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

3 个答案: