ヘッダーとナビの間隔を削除する

私は自分のウェブデザイン会社のサイトを構築しようとしています。私が基本的な質問をしていることを考えれば、私はそれをやっているのは皮肉なことです。一方、私は基本的なサイトを構築して経験を得るだけです。私の問題は、ヘッダーとナビゲーションバーの間のギャップを取り除こうとしていることです。私はそれらを固定位置に設定しようとした後、 "トップ"値を設定しようとしましたが、ブラウザウィンドウがサイズ変更されたときにすべてが不自由です。それは、モバイルデバイスとデスクトップデバイスで応答性と表示が必要です。ヘッダーとナビの間隔を削除する

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Picasso</title> 
     <link rel="stylesheet" href="styling.css"> 
    </head> 
    <body> 
     <header> 
      <img src="img/pwd_logo_05.png" alt="logo" id="logo"> 
      <h2>For Desktop &amp; Mobile </h2> 
     </header> 
     <nav> 
      <ul> 
       <li>Donate</li> 
       <li>Request</li> 
       <li>Contact</li> 
       <li>Home</li> 
      </ul> 
     </nav> 
    </body> 
    <footer> 

    </footer> 
</html>

CSS

header { 
    background-color: whitesmoke; 
} 

#logo { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    padding-top: 1.5em; 
    width: 30%; 
    height: 30%; 
} 

h2 { 
    padding-bottom: 1em; 
    text-align: center; 
    font-family: sans-serif; 
} 

nav { 
    width: 100%; 
    background-color: black; 
} 

ul { 
    list-style-type: none; 
    overflow: hidden; 

} 

li { 
    text-decoration: none; 
    text-align: center; 
    float: right; 
    padding: .875em 1em; 
    color: whitesmoke; 
    font-family: sans-serif; 
} 

body { 
    background-image:url(img/background.png); 
}

出典

2016-03-27 sokunato

デフォルトのパディングと余白をリストから削除するこのCSSを試してください： 'nav> ul {margin：0;パディング：0;} ' – Akis

はあなたli CSSからあなたh2 CSSからpadding-bottom: 1em;を外し、padding: .875em 1em;。

パディングでは基本的に要素の周りにスペースが確保され、現在表示されているギャップになります。 CSSからパディングを削除すると、スペースが削除されます。

私が提案したことはあなたの質問に答えてくれますが、最善の解決策ではないかもしれません - あなたはパディングについて少し学びたいと思うでしょうし、パディングが正しい場所に適用され、間違ったもの

出典

2016-03-28 00:02:12 millerbr

私は両方を試みましたが、解決はありません。私は詰め物が容器の内側に適用され、余白が容器の外側の空間を作り出すものであると考えました。 – sokunato

タイトルH2に設定されている余白のためです。 "margin-bottom"を0に設定してください。

UL要素の "margin-top"と同じことです。

出典

2016-03-28 00:05:06

0は機能しませんでしたので、私は負の値を試しました。それは問題を解決しました – sokunato

Hmm。 0はうまくいくはずです。代わりに0pxを試してみてください。おそらく、全体のコードに何か他のものがありますか？ Ps：問題を見つけられず、0を書いたときにそれがなぜ起こっていないかを理解していない場合は負の数を入れないでください。ライブでテストしたい場合はインスペクタを使用してください（右クリック>検査）：正確に要素間の間隔を引き起こします。これらの便利なツールを使用するのに役立つWeb上のチュートリアルはたくさんあります; D –

ヘッダーとナビの間隔を削除する

答えて

関連する問題