html - CSSのゼロパディングが「false」マージンを作成するのはなぜですか？

Question

私は過去にこれに遭遇しましたが、通常、最初のPまたはH1タグの上部マージンを手動でゼロに設定することで問題を回避するように設計できました（今回は機能しませんでした）。

パディング/マージンを0PXに設定すると、なぜ「false」マージンが得られるのですか？ラップdivにPXパディングを1つでも与えると、問題が自動的に修正され、すべてが見栄えが良くなります。そうでない場合は、上部に空白が表示されますが、これはまったく意味がありません。パディングを変更すると、含まれているdivのマージンに影響するのはなぜですか？

JSFiddle

何が起こっている？

Answer 1

これはマージン崩壊と呼ばれます。この名前を知ったら、たくさんのチュートリアルが見つかります; ）

Answer 2

追加するoverflow: hidden;と魔法がかかります。

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