【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

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

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

解決しましょう。




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

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

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

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

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

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

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

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

おお、はみ出ない!

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

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

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

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

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

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

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

以上、現場からでした。

バイバイ!

コメント

  1. さしだくうき より:

    こういった場合は親要素の .parent に overflow:hidden を入れてあげるのがスムーズかもしれませんね!

    • ぜろみや より:

      おお、そんな方法もあったんですね!
      はみ出す要素がなければ一番シンプルでよさそうですね〜