CSS

子要素に効かせたmarginが親要素に影響してしまう問題

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

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

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

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

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

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

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

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

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

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

WordPressテーマ「MAG(TCD036)」

最近の記事

  1. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  4. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
  5. CSS

    CSS|中央寄せが効かないときは・・・
PAGE TOP