ここでは何が起こっているのですか。
マージン折りたたみ。ジェーレンの答えは、私に頭痛を与えたW3C box model specs for collapsing marginsに私を指摘し、国境の質問にはあまり答えなかった（Odedが最初に指摘した）。次に、私はthis articleを見つけて解決策をまとめました（私はトップマージンについて話していますが、まったく同じ解決策がボトムマージンに当てはまります）。 2 [ブロックレベル]要素の垂直マージンが触れている
、大きなマージンが使用され、小さなマージンが破棄されます。
コード内のすべてが、<html>と<body>タグを含むブロックレベルの要素とみなされます。
<body>は、親の<html>要素内にデフォルトのmargin-topの8pxを持っています。
最初の<p>タグのデフォルト値はmargin-topで、16pxです。
マージン折りたたみは兄弟に限定されないため、<p>タグは親タグの位置とマージンをチェックし始めます。
#child要素は<p>トップマージンが#child上部マージンに触れているので、それらは単一16pxにマージン（> 0 16）に崩壊0のmargin-topを有しています。 <p>タグの16ピクセルマージンは「プッシュスルー」し、#childタグのマージンとして機能します。
<p>からの16pxマージンは、それの真上のマージンをまだチェックしています。次までも0
のマージントップを持っていますが、#parent上の1ピクセルの境界線は、任意のさらなる行くから<p>を防ぐことができます。#parentタグ、だろう<p>は、1pxの境界線に接触しているため、それより上に余白が残っていません。だから、崩壊は#parentの上端の内側で止まります。
16ピクセルの余白がレンダリングされ、その下に0ピクセルのマージンが崩壊した#childタグがあります。
#parentボックスが#childボックスより32PX背が高い理由です
：彼らはマージン（1ピクセルの境界線）でなかった何かを打つまで<p>マージンが「通過墜落しました」。だから、もし#parentの1pxボーダーが崩壊を止めていなかったらどうなるでしょうか？
上記の手順1〜7に従います。
<p>の上マージンは、#parent要素の0pxのマージンになります。再び、<p>がより大きいマージン（16対0）なので、折り畳みは上方に続きます。
<p>の上マージンは<body>タグに当ります。 <body>のデフォルトの上マージンは8pxです。 <p>タグが大きいので、<body>タグは16pxの上マージンを「継承」し、8pxは破棄されます。
<p>先頭余白は<html>タグに達します。 <html>がルート要素であるため、ここで折り畳みが停止します。 <body>タグは16pxの上マージンでレンダリングされ、#parent,#child、および<p>要素はすべて下にレンダリングされます。 <p>は、マージンがクラッシュしたため、#parentボックスの内側にぴったりです。
これは把握してくれそう長くかかった理由は、私は今日まで余白を崩壊の聞いたことがなかったのと同じ理由です：Firebugのは明らかに崩壊マージンを示していません。 Firebugでは、<p>タグはまだ16pxの上限を保持していることを示しています。これは本当です。ただし、折りたたみが発生したという兆候はありません。廃棄されても、<body>タグは8pxの上端を報告します。
私はこれを今知ってうれしいです。私はページレイアウトについて多くの混乱を明らかにしています。
編集：
The article I referencedが読み取り本当に価値があります。それは私に答えに必要な情報を与えただけでなく、それはIE7でどのように詳細が<body>タグは国境が崩壊に参加していない詳細。それはたくさん説明します。
パディング？マージン？ – SuperSaiyan
+1これは私には奇妙です。 – Jake