CSS 入れ子になった子要素のmargin-top

質問

添付画像の上図のように、入れ子になっている子要素のmargin-topを指定すると、下図のように親ボックスも一緒に指定したpx分動いてしまうのは「上下マージンの相殺」になるのでしょうか？

この場合どのmarginとどのmarginが相殺されてこうなるのか初心者にわかりやすく教えていただけないでしょうか？？

外側のボックスにpadding又はborderを設定する必要があるみたいですが、いまいち理解できません。

どうかよろしくお願い致します。

回答No.1

ORUKA1951

垂直方向のマージンは、親コンテナ要素にpaddingやborderが指定されている場合は、親要素の内寸からになります。それらが指定されていない場合は先出のマージンが指定されている要素の間で計算されます。
　⇒8.3.1 マージンの相殺 ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/box.html#collapsing-margins )
　の後半