为什么我的CSS中的零填充会创建“虚假”​​边距？

Question

我过去遇到过这种情况，但我通常能够围绕这个问题进行设计 - 通常是通过手动将第一个P或H1标签的上边距设置为零（不能正常工作）时间）。

当我将填充/边距设置为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;
}