CSS에서 제로 패딩이 왜 '여백'을 만드나요?

Question

필자는 과거에이 문제를 겪었지만 대개 수동으로 첫 번째 P 또는 H1 태그의 위쪽 여백을 0으로 설정하여 문제를 해결할 수있었습니다 (이번에는 작동하지 않았 음).).

패딩/여백을 0PX로 설정하면 왜 '거짓'여백이 생깁니 까? 랩 div에 하나의 PX 패딩을 주면 문제를 자동으로 수정하고 모든 것이 멋지게 보이지만 단순히 맨 위에 공백이 있으면 의미가 없습니다. 패딩 효과를 포함 된 div의 여백을 변경하는 이유는 무엇입니까?

JSFiddle

무슨 일입니까?

Answer 1

Margin Collapse이라고합니다. 이 이름을 알면 many tutorials을 찾을 수 있습니다.)

Answer 2

overflow: hidden;을 추가하면 마술을합니다.

#wrap 
{ 
    width:1024px; 
    height:748px; 
    background:#000; 
    margin:0px; 
    padding:0px; 
    overflow: hidden; 
}