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

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

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

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 データベースの高度なクエリとマルチテーブルクエリ

MySQL マルチテーブルクエリワークシートを追加する -- ユーザーテーブル (ユーザー) テーブ...

Linuxでブーストライブラリをインストールするための完全な手順

序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...

MySQLログシステムの詳細情報共有

大規模なシステムに取り組んだことがある人なら誰でも、ログの役割を過小評価してはならないことを知ってい...

MySQL 5.7 のインストールと設定のチュートリアル

この記事では、参考までにMySQLのインストールと設定のチュートリアルを紹介します。具体的な内容は次...

Alibaba Cloud で MySQL リモート接続を構成するための詳細な手順

序文ご存知のとおり、デフォルトでは、Alibaba Cloud にインストールされている MySQL...

MySQL ストレージエンジン InnoDB の設定と使用方法の説明

MyISAM と InnoDB は、MySQL で最も一般的なストレージ エンジンです。前回の記事で...

MySQLの行ロックとテーブルロックの意味と違いの詳細な説明

1. はじめに行ロックとテーブルロックの違いは面接で頻繁に出てくるはずです。MySQL のロックにつ...

データベースを削除して逃げる?xtraback を使用して MySQL データベースをバックアップする方法

1. mysqldump バックアップ方法では論理バックアップが使用されます。最大の欠点は、バック...

MySQL データベースの鉄則 (要約)

適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...

CentOS 8 VMware 仮想マシンがインターネットにアクセスするための静的 IP ネットワーク カードの設定の詳細な説明

最初のステップ: VMwareで、「編集」-「仮想ネットワークエディタ」をクリックします。下図に示す...

Tomcat ソースコード起動コンソールの中国語文字化けのデバッグプロセス記録

問題を見つける今日はTomcatのソースコードを勉強するつもりなので、公式サイトからTomcatのソ...

MySQLでのカスタムパラメータの使用に関する詳細な説明

MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...

メタ宣言注釈の手順

メタ宣言注釈の手順: 1. モバイル ページと 1 対 1 で対応するすべての PC ページを分類し...

HTMLでキーワードを強調表示するのに最適なソリューション

最近、プロジェクトに取り組んでいるときに、Web ページ上のキーワードを強調表示する機能に遭遇しまし...

要素テーブルテーブルコンポーネントの複数フィールド(複数列)ソート方法

目次必要:発生した問題:解決する:必要:要素テーブル内の複数の列を並べ替えるには、日付の並べ替えをク...