マージントップ崩壊現象とその具体的解決策

マージントップの崩壊とは

margin-top の崩壊は、CSS ボックスモデルで発生する現象です。親要素が子要素を囲む場合、子要素に margin-top プロパティが設定されていると、このとき、子要素の境界線を親要素の境界線から一定の距離だけ離したいのですが、親要素の上部が本体の境界線からずれてしまいます。これが margin-top の崩壊という現象です。

子要素 (緑色の部分) に margin-top 属性が追加されていない場合、Web ページは次のようになります。

ただし、子要素に margin-top 属性を追加すると、Web ページの表示は次のようになります。

子要素の境界線と親要素の境界線（黄色の部分）の間の距離は広がっていないことがわかります。代わりに、親要素の上境界線とブラウザの上境界線の間の距離が広がっています。つまり、親要素は子要素とともに一定の距離だけ下に移動します。検査後、この距離は子要素に設定した margin-top 属性値とまったく同じです。これが margin-top の崩壊という現象です。

マージントップの崩壊を解決する方法

マージントップの崩壊問題は、以下の点から解決でき、効果的であることが証明されています。

1. 親要素に境界線を追加する

元の画像効果に影響を与えないように、境界線の色を白（ブラウザの背景色と一致する）に設定できます。

2. オーバーフローの非表示

親要素のスタイルに overflow:hidden を追加します。

3. フロートを使用する

親要素のスタイルに float を追加しますが、この方法は推奨されません。未知のエラーが発生するため

4. 親要素にposition:fixedを追加します。

ここでは、配置の知識を使用して、親要素を固定位置に表示し、margin-top の崩壊の問題の影響を受けないようにします。

5. 親要素に display: table を設定します。

6. 疑似要素を使用する

疑似要素は実際のページ要素ではなく、HTML には対応する要素がないため疑似要素と呼ばれますが、その使用方法とパフォーマンスの動作は実際の要素と同じであるため、疑似要素と呼ばれます。

.clearfix::before{ 
コンテンツ： "; 
表示: テーブル; 
}

.clearfix は親要素に追加される別のクラス名です。これは、他の追加の不明なエラーを引き起こすことなく、margin-top の崩壊の問題を解決できる推奨ソリューションです。

解決策が決まったので、次に示すように最終結果を見てみましょう。

ご覧のとおり、子要素の現在の位置は親要素に対して相対的に移動しており、親要素の位置には影響しません。

デバッグコードは以下に添付されています。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>10 マージン上部折りたたみ</title>

    <スタイル>

        .clearfix::before{
            コンテンツ： '';
            表示: テーブル;
        }

        。箱{
            幅: 200ピクセル;
            高さ: 200px;
            背景色: ゴールド;
            マージン:0px 自動; 
        }

        .con{
            幅: 100ピクセル;
            高さ: 50px;
            背景色: 緑;
            上マージン: 100px;
        }
    </スタイル>
</head>
<本文>

    <div class="box clearfix">
        <div class="con"></div>
    </div>

</本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: 相対幅を使用してテーブルのサイズを変更する際の問題

>>: nginxで静的リソースを公開する方法