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를 가운데로 만듭니다. 몇 번 보았을 때까지 직관적이지 않은 깔끔한 트릭입니다.

도움이 될지 알려주세요. 행운을 비네!