ここでは、子要素に効いているmarginが親要素のmarginみたいになってしまう不思議な現象の解決法についてお話します。

まず、問題の現象がこちらです。

ボタンで表示を切り替えてご覧ください。

See the Pen child_margin_parent01 by kenichi (@ken81) on CodePen.

div要素３つがタテに並んでいて、それぞれに背景色を入れました。div要素にはmarginを指定していないにも関わらず、真ん中のp要素のmarginが親要素の外側に効いてしまっています。

解決策： 親要素にoverflow:hidden;を入れる

これを解決するには、親要素にoverflow:hidden;を入れます。

See the Pen child_margin_parent02 by kenichi (@ken81) on CodePen.

上記のようにmarginが外側に効いてしまう親要素に対してoverflow:hidden;を入れると内側に収まるようになります。

以上が子要素に効かせたmarginが親要素に影響してしまう問題の解決法でした。