マージンの相殺とは？
マージンの相殺とは、ブロックレベルの要素の上下のマージンで起こる挙動です。マージン同士が重ね合わさり、「相殺」されます。
See the Pen marginの相殺 by バイオハックch (@synd1090) on CodePen.
入れ子になったマージンの相殺
入れ子になった要素のマージンも相殺されます。その結果、子要素のマージンが親要素を突き抜けます。
See the Pen マージンの相殺2 by バイオハックch (@synd1090) on CodePen.
入れ子になったマージンの相殺を防ぐ方法
親要素にborderを指定する、paddingを指定する、displayをinline-blockにする、親要素がフレックスボックスで指定されている、親要素にインラインコンテンツが存在する場合には、マージンの相殺を防ぐことができます。
下は、フレックスボックスで並べた例です。子要素のマージンが親要素を飛び出ることはありません。
