これはわからんわ。

生徒さんの一人が陥った罠。
先生も知りませんでしたごめんなさい。

□ 【CSS Tips】ネストされたボックス要素のmargin-topのブラウザ毎の解釈の違い−Margin Collapsing - Awaresoft

空でないコンテンツ、ボーダー、パディングまたはclearで分けられていない、並列またはネストによって隣接した二つ以上のボックスのマージンは結合されて一つになる。

タグ ：

margin

margin-top

マージン

CSS

カスケードスタイルシート

親要素

入れ子

HTML・CSSコーディングで2カラム、3カラムを実装するときに最も使用頻度の高いCSSプロパティはfloatでしょうね。
左のボックス（div等）にfloat:left、右のボックス（div等）にfloat:rightとすることで2カラムを作ることができます。
（それぞれ、widthの設定も忘れずに） 
ただ、これを囲む親要素のバックグラウンドに色を入れたいときなどにうまくいかないことがあります。
たとえばこんな例です。

タグ ：

CSS

CSS2.1

float

HTML

float:left

プロパティ

カスケードスタイルシート