これはわからんわ。

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

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

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

タグ ：

margin

margin-top

マージン

CSS

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

親要素

入れ子

CSSには「position（ポジション）」というプロパティがあって、これを使って「position:absolute」と指定すると、
画面上の好きな場所にそのブロック要素を配置することができます。
ただし、自由に動かせすぎるだけに、注意しないとこういったことになりかねません。

タグ ：

position:absolute

position:relative

絶対配置

相対配置

子要素

親要素

CSS