marginの相殺同様、marginの突き出しもmarginが意図していない結果になる時があります。
どのような現象かというと親要素にborderやpaddingが設定されていない場合、子要素のmarginが親要素を超えて適用されることを指しています。これをマージンの突き出し、またはマージンの重なりとも呼ばれる現象です。
下記のようなHTMLとCSSのコードがあったとします。実際は親の要素の中で子要素にmarign-topで20pxつけたい（左図）のですが、実際は親要素からはみ出してしまいます（右図）。
どうしたらいいかわかりませんでした。
HTML
<div class=”parent”>
<div class=”child”>子要素</div>
</div>
CSS
.parent {
width: 100px;
height: 100px;
background-color: lightblue;
}
.child {
margin: 20px;
padding: 10px 6px;
background-color: yellow;
}
