【CSS】子要素のmarginが親要素から突き出てしまう時の対処法【メモ】

親要素が空っぽの場合、子要素のmargin-topは親要素から突き出てしまいます。親要素にbackground-imageなどで背景画像を設定していたら、レイアウトがずれずれになってしまいます。

親要素を枠で囲めば、外枠ができるので、子要素のmarginは親要素からはみ出すことはできません。

親要素とmarginを設定したい子要素との間にもう１つボックス要素を挟みましょう。すると、親要素をはみ出すことはなくなります。ただし、この間に挟むボックスも空っぽでは、やはりはみ出してしまいます。heightを指定して、実体のあるものとして挟みましょう。