box1 に margin: 20px; とすると上下左右のマージンが均等ではないのはなぜですか?

垂直方向にだけ margin の相殺が起こるためです。
2021年5月13日
ユーザー

別の方の質問で「 margin を 0 にしても余白が見えるのは→ body のデフォルト margin があるから」ということでした。

前提として box1 に一括指定 margin: 20px; にした場合、上下左右余白= 20px となると思うのですが、そこのまわりに + body デフォルトの 8px の余白がプラスされるイメージ図の理解で合っておりますでしょうか。

上記で合っているとして、実際の表示では、
(A)上部余白=(B)左余白に見えず、
(A)上部余白=(C) box1と box3 の間の余白に見えます。
これはどうしてでしょうか。

よろしくお願いいたします。

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(12)