<nav>と空白を削除する方法<header>

ページ上部の<nav>バーとその下の<header>バーの間に大きなギャップがあります。私は以前にこの問題を解決しましたが、私がどのようにしたのか覚えていません。<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/

出典

2016-10-14 Hentoad

のためのあなたのp.helloを変更 – Geeky

はp.helloにmargin: 0;を追加 - 、その大きなフォントサイズにデフォルトでpタグが自動的に追加された大きなmargin-topを、持っていること.header要素。その設定は、それをリセットします：

https://jsfiddle.net/ze8pwk1z/

出典

2016-10-14 23:48:27 Johannes

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

あなたのフォントサイズが犯人です。それを変更すると、それに応じてギャップが変わります。

出典

2016-10-14 23:51:26

ちょうどあなたがCSSでNAV上でそれを宣言したパディングとマージンを削除この

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

出典

2016-10-20 20:00:50

<nav>と空白を削除する方法<header>

答えて

関連する問題