HTML5背景色の塗りつぶしが大きすぎます

Question

divのHTML背景色を塗り潰そうとすると、一番下の部分に膨大な余分なスペースが残ってしまいます。ワイド。誰かがこれで私を助けることができますか？

私のHTMLは

ある

<div class="header"> 
    <h1>Welcome to My Site</h1> 
</div> 

私のCSSは

div.header{ 
    background-color:grey; 
} 

感謝です！

Answer 1

ブートストラップを使用することをお勧めします。コミュニティのサポートとドキュメントがたくさんあります。自分で色やスタイルを変更することもできます。

ブートストラップウェルクラスはあなたのために働くことができます。

<div class="well"> 
    Look, I'm in a well! 
</div> 

または大きな影響を与えるジャンボトロン。

<div class="jumbotron"> 
    <h1>Jumbotron</h1> 
    <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> 
    <p><a class="btn btn-primary btn-lg">Learn more</a></p> 
</div> 

Answer 2

コードに幅、高さ、余白を追加することをおすすめします。あなたはcodepen.ioのようなウェブサイトであなたのコードを試すことができます！以下は、私が話していることの例へのリンクです。

https://codepen.io/wykydtronik/pen/VpEGer

div.header{ 
    background-color:grey; 
    width: 350px; 
    height: 150px; 
    margin: 0 auto; 
} 

あなたはCSSコードを見れば、あなたは、私は350pxの幅、及び150ピクセルの高さを設定し表示されます。私は余裕を追加した：0オート;ヘッダdivを中央にする。あなたがそれを数回見てしまうまで直感的ではない、きちんとしたトリックです。

これが役立ちますか、幸運を私に教えてください！