【CSS】子要素にmarginがあると、親要素を突き抜けてしまう問題の対処法

コーディングしているとき、子要素の下にmarginをつけているのに、親要素の下側に余白ができない場面に遭遇したことはないでしょうか？

例えば以下のような形。

See the Pen penetrate-child by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark

.childには等しくmargin-bottom: 30px;をつけているはずなのに、最後だけ下に余白がない…余白がほしいんだけど。

これは、子要素のmarginが親要素を突き抜けてしまうことで発生する現象です。

もう一つ並べてみましょう。

See the Pen poJQNyp by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark

３番目の子要素のmargin-bottomが突き抜け、２つのparentの間に余白ができていることがわかると思います。

これはちょっと意図してない動作ですよね。

解決しましょう。

解決策その１．子要素の最後にmarginをつけず、親要素にpadding-bottomをつける

See the Pen penetrate-child3 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark

.parentにpadding-bottomを追加し、.childの最後だけmargin-bottomを解除。こうすることで、marginはないので当然突き抜けずに余白を実装できます。ある意味一番自然な形ですが若干めんどくさいですね。

疑似要素”:last-child”について、よくわからなければ以下の記事を参考にしてください。

CSS 「n番目の要素」を指定できるnth系疑似要素のまとめと注意

「n番目の要素」という指定ができる":nth-child(n)"系の疑似要素ですが、注意しなければいけない点と、案外知られていない便利なバリ...

meshikui.com

2019-09-02 19:35

解決策その２．親要素にoverflow:hidden;をつける

コメントで教えていただきました。親要素にoverflow:hidden;。

See the Pen penetrate-child4 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark

おお、はみ出ない！

親要素からはみ出る要素がない場合は、シンプルで使い勝手が良いですね。ありがとうございます！

解決策その３．親要素にpadding-bottom:1px;をつける

裏技というかほとんど力業なんですが、実は親要素にpaddingがあれば、子要素のmarginは突き抜けません。ややこしいですね。

この性質を利用して、親要素にpadding-bottom:1px;をつけてやりましょう。

See the Pen penetrate-child4 by ぜろみや@フリーのWeb屋 (@zeroichi69) on CodePen.dark

うーん、いいんじゃないですかね！

ただし、もちろん1pxの無駄が生じます。この1pxの無駄を許さない場合は、やめときましょう。

以上、現場からでした。

バイバイ！