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

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

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

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で静的リソースを公開する方法

推薦する

MySQLでテーブル名を変更する方法と注意すべき点

目次1. テーブル名を変更する方法2. 注記要約: 1. テーブル名を変更する方法RENAME TA...

Vueパンくずコンポーネントのカプセル化方法

Vueはパンくずコンポーネントをカプセル化して参照します。具体的な内容は次のとおりです。効果を達成す...

awk でのループの使用

同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...

Angularが予期しない例外エラーを処理する方法の詳細な説明

前面に書かれたコードがどれだけ適切に記述されていても、すべての可能性のある例外を完全に処理することは...

MySQL データベース接続例外の概要 (収集する価値あり)

Centos にプロジェクトをデプロイするときに奇妙な問題が見つかりました。データベース接続で例外...

Dockerでランナーコンテナを構成する方法

1. ランナーコンテナを作成する mk@mk-pc:~/Desktop$ docker run -d...

HTML CSS に基づく検索アイコン付き検索ボックス機能を実装する

序文フロントエンドで非常に便利な、小さなアイコン付きの検索ボックスを作成する方法をご紹介します。エフ...

Mysql データベース ストアド プロシージャの基本構文の説明

プロシージャ sp_name を削除します//これまで、MYSQL 構文の基礎知識について説明して...

EDMをHTMLで記述する際の注意点まとめ(メール送信時の一般的な注意点)

フォーマットエンコーディング1. ページの幅は600~800px、長さは1024px以内に設定してく...

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

vue3.0+vant3.0の迅速なプロジェクト構築の実装

目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...

MySQL での find_in_set() 関数の使用に関する詳細な説明

まず、例を見てみましょう。記事テーブルにはタイプフィールドがあり、1 見出し、2 おすすめ、3 ホッ...

Vue3 の emitting と attr の違いの分析

目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...

mysql ビュー関数の分析と使用例

この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...

LinuxにVSCodeをダウンロードしてインストールし、プログラミングを使用して現在の時刻を出力する

rpmコマンドがソフトウェアのインストールに使用するパラメータはどれですか: -i rpm コマンド...