왜 CSS 레이아웃이 래퍼 컨테이너를 일으키는 것은

Question

내 질문은 여기에 코드에 관하여 최고 마진을 가지고 : http://codepen.io/anon/pen/zoYmZz

래퍼 사업부는 헤더 DIV 위의 노란색 배경을 (여백처럼 보이는 것을) 보여주고있다 . 왜 이런 일이 일어나고 있는지 궁금합니다.

두 가지 모두에 대해 margin 및 padding을 0으로 설정해 보았습니다. 실제로 코드의 모든 요소에 대해 0으로 설정했습니다. html, body, #header, #footer, etc

노란색이 계속 표시됩니다. 나는 제로 마진과 세계적으로 패딩을 적용 할 때

그러나

* { margin: 0; padding: 0; } 

이

을 방지 할 수 있고, 난 그냥 대신 래퍼 컨테이너에 몇 가지 작은 마진과 패딩을 추가 할 수 있습니다

#wrapper { margin-top: 10px; margin-bottom: 10px; } 

http://codepen.io/anon/pen/KNKGvz

제 질문은 왜 이런 일이 일어나고 어떻게 원숭이 - 파를 사용하지 않고 두 번째 코덱의 결과를 얻을 수 있습니까? 그것을 찌르는.

Answer 1

h2 요소의 경우 margin입니다.

h2 { 
    margin: 0; 
} 

을 수정합니다.