DIV가 비어있을 때 부모 요소에 전달되는 CSS 속성

Question

IE8과 Chrome에서이 문제가 발생하여 표준적인 것으로 생각됩니다.

콘텐츠가 없지만 CSS에 배경 이미지와 높이/너비가 설정된 DIV를 사용하여 헤더 및 메뉴가있는 사이트를 만들고 있습니다. 내부 DIV가 부모 div에 대해 여백을 가지기를 원하지만 부모 div에 여백을 적용합니다. div에 콘텐츠를 넣으면이 문제가 해결됩니다. IE7에는이 문제가 없습니다.  을 사용하고 싶지 않습니다. 해킹을 일으키고 해킹처럼 보이기 때문입니다.

아래 다시 예제 코드를 참조하십시오

<style> 

#header{ 
    width:600px; 
    height:300px; 
    background-color:red; 
} 

#headerMenu{ 
    height:100px; 
    width:500px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:blue; 
    margin-top:20px; 
} 

</style> 

<div id="header"> 
    <div id="headerMenu"> 
    </div> 
</div> 

는 부모 DIV의 내용 또는 테두리를주는 경우에 레이아웃이 제대로 작동합니다. 이 사이트에서이 동일한 문제가 몇 번 발생했습니다. 나는 margin-top을 메뉴 항목의리스트에주고 싶었지만 headerMenu div (그 부모) 또한 어떤 내용도 가지지 않으므로 속성을 버블 링했다.

무슨 일 이니?

Answer 1

나는 margin collapsing으로 달려가고 있다고 생각합니다.

자세한 내용은 CSS 2.1 spec on margin collapsing을 참조하십시오.

Answer 2

#header css 코드에 overflow: auto을 추가해보세요. 예를 들어

,

#header{ 
    width:600px; 
    height:300px; 
    background-color:red; 
    overflow: auto; 
} 

편집 :뿐만 아니라 position: absolute 작품처럼 보인다.

Answer 3

예, 표준 사항입니다. 그것은 여백 붕괴라는 것이고 IE7에서 그것을 볼 수없는 이유는 IE7이 잘못 되었기 때문일 가능성이 큽니다.

여백은 요소 주위의 영역을 지정하지 않고 요소 간의 최소 거리를 지정하기 때문에 약간 까다 롭습니다. 마진 붕괴는 자식 요소에 여백이 있고 부모 요소에 여백이나 테두리가 없을 때 발생합니다. 마진은 하위 요소와 상위 요소 사이가 아닌 하위 요소와 주변 요소 사이에 적용됩니다.

일부 브라우저 (알고있는 IE 만)는 접기 여백을 올바르게 처리하지 못하므로 지금은이를 피해야합니다. 가능한 경우 패딩을 사용하거나 패딩이 생기지 않도록 상위 패딩 또는 경계를 설정하십시오.

Answer 4

난 그냥뿐만 아니라이 문제를 가지고 있었고, CSS이 추가

border: 0px solid;