여백이 투명하지 않습니다.

Question

나는 header입니다. 내부에는 또 다른 배경 이미지가있는 <div>이 있습니다. <header>에 설정된 단색 배경색을 나타 내기 위해 상단 및 하단 여백을 60px로 지정하고 배경색을 표시하지 않습니다. #2f2f2f 흰색입니다. 내가 뭘 놓치고 있니?

HTML

<header> 
    <div class="header"> 
     <h1>Stuff here</h1> 
    </div> 
    </header> 

CSS하기는 collapsing margins을 관찰하는

header{ 
    background-color: #2f2f2f; 
    width: auto; 
    height: auto; 
} 

.header{ 
    background: #2f2f2f url("../images/tweed.png") repeat left top; 
    margin: 60px 0; 
} 

Answer 1

:

8.3.1 Collapsing margins

CSS에서

, 두 개 이상의 상자의 인접 마진 (이 수도 그렇지 않을 수도있다. t 형제가 됨)는 결합하여 단일 마진을 형성 할 수 있습니다. 이 방법을 결합한 여백은 붕괴 된 것으로 간주되며 그 결과 결합 된 여백을 붕괴 여백이라고합니다.

하나의 해결책은 부모 요소에 visible 이외의 overflow을 설정하는 것입니다. 이 경우 :

Example Here

header { 
    background-color: #2f2f2f; 
    width: auto; 
    height: auto; 
    overflow: auto; 
} 

더 해결에 더 긴 설명은 내 this older answer를 살펴 보자.