CSS のマージンの崩壊問題を解決する方法

まず、マージン崩壊が発生する 3 つの状況を見てみましょう。

1. 隣接する 2 つのブロックレベル要素が接する場合、上の要素には下マージン margin-bottom があり、下の要素には上マージン margin-top がある場合、それらの間の垂直距離は 2 つの値のうち大きい方の値になります。

<スタイル>
  .box1 {
     幅: 150ピクセル;
     高さ: 100px;
     下マージン: 20px;
     背景色: rgb(201, 239, 98);
  }
  .box2 {
     幅: 100ピクセル;
     高さ: 100px;
     背景色: レベッカ紫;
     上マージン: 10px;
  }
</スタイル>
   <div class="box1"></div>
   <div class="box2"></div>

このとき、2 つのボックス間の垂直距離は 30 px ではなく 20 px になります。

解決：

1 つのボックスにのみ余白を追加するようにしてください。

2. ネストされた 2 つのブロック要素の場合、親要素に上余白と境界線がない場合、親要素の上余白は子要素の上余白と結合され、結合された余白は 2 つのうち大きい方になります。

<スタイル>
        .box1 {
            幅: 150ピクセル;
            高さ: 100px;
            上マージン: 20px; 
            /* 境界線: 1px 実線 #000000; */
            背景色: 赤;
        }

        .box2 {
            幅: 100ピクセル;
            高さ: 100px;
            /* 境界線: 1px 実線 #000000; */
            背景色: レベッカ紫;
            上マージン: 10px;
        }
    </スタイル>
</head>

<本文>
    <div class="box1">
        <div class="box2"></div>
    </div>
</本文>

このとき、2 つのボックスが結合され、上余白は 20 px になります。

解決：

①親要素の上境界線を定義する

②親要素の上余白を定義する

③親要素にoverflow:hiddenを追加します。

④フローティングを追加

⑤絶対位置指定を追加する

3. 空のブロックレベル要素があり、境界線、パディング、インラインコンテンツ、高さ、最小高さが存在しない場合は、上余白と下余白の間に障害はなく、上余白と下余白は結合されます。

<p style="margin-bottom: 0px;">この段落と次の段落の間の距離は 20px になります</p>

<div style="margin-top: 20px; margin-bottom: 20px;"></div>

<p style="margin-top: 0px;">この段落と上の段落の間の距離は 20px になります</p>

真ん中のdivの幅が0で、上下の余白が結合され、余白の最大値のみが取られていることがわかります。

CSS のマージン崩壊問題を解決する方法についての記事はこれで終わりです。CSS マージン崩壊に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Docker に ElasticSearch をインストールする方法を 1 つの記事で解説

>>: HTML でテキストの折り返しを実装する例 (HTML でテキストと画像が混在)