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

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

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

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