CSS マージンの重複と解決策の探索の詳細な説明

CSS マージンの重複と解決策の探索の詳細な説明

最近、CSS 関連の知識ポイントをいくつか見直し、CSS における典型的なマージンの重なりの問題を整理してまとめました。目的は、レビューの効果をテストし、他の人に役立つことを願っています。漏れがある場合は、フロントエンドのベテランにアドバイスを求めたいと思います。

質問: CSSレイアウトを使用すると、次の図に示すように、兄弟ノードまたは親子ノードによって設定された上部と下部の余白が重なり合うことがわかります。

    <スタイル>
        。外 {
            幅: 100%;
            背景色: ピンク;
        }

        .out>div {
            高さ: 100px;
            幅: 100%;
            背景色: rgb(223, 136, 23);
            マージン: 5px 0 10px;
        }
    </スタイル>
    <セクションクラス="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </セクション>

セクション全体の高さを確認すると、実際には 345px になるはずですが、親と子、兄弟の余白が重なり合っているため、高さは 320px になっていることがわかります。では、実際のアプリケーションでこの問題をどのように解決するのでしょうか?
この問題は、BFC (Full Block Formatting Context) を作成することで解決できます。まず、BFC の原理を明確にしましょう。

BFC 内の要素は外部の要素に影響を与えず、比較的独立した閉じた領域です。
隣接する BFC 間で垂直マージンの重なりはありません。つまり、要素のマージンが重ならないようにするには、BFC 領域を作成する必要があります。
BFC 領域はフローティング要素のボックスと重なりません。
BFC の高さを計算する際には、浮遊要素も考慮されます。
ブロック書式設定コンテキストを作成するにはどうすればよいですか?
1. オーバーフロープロパティを非表示に設定します。
2. float が none ではない。
3. 位置の値は静的でも相対的でもない。
4. 表示属性がテーブルの場合

    <スタイル>
        。外 {
            幅: 100%;
            背景色: ピンク;
            オーバーフロー: 非表示;
        }

        .out>div {
            高さ: 100px;
            幅: 100%;
            背景色: rgb(223, 136, 23);
            マージン: 5px 0 10px;
            /* オーバーフロー: 非表示; */
            フロート: 左;
        }
    </スタイル>
    <セクションクラス="out">
        <div>11</div>
        <div>22</div>
        <div>33</div>
    </セクション>

セクションの高さを再度確認すると、高さが 345 ピクセルに戻っていることがわかります。これは、BFC が高さを計算するときに、フローティング子要素の高さも考慮されていることを証明しています。

CSS マージンの重複の詳細な説明と解決策の探求に関するこの記事はこれで終わりです。CSS マージンの重複に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  int(3)とint(10)の値の範囲はmysqlで同じですか?

>>:  CSS最適化スキルの自己実践体験

推薦する

JavaScript の基本: ループと配列

目次ループ - for forループの基本的な使い方ループを終了するネストされたループ配列配列とは何...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...

Vue は QR コード スキャン機能を実装します (スタイル付き)

必要: vue を使用して QR コードのスキャンを実現します。プラグイン: QRコードリーダー;プ...

Windows 10 + mysql 8.0.11 zipインストールチュートリアルの詳細

準備する: MySQL 8.0 Windows zip パッケージのダウンロード アドレス: htt...

ノードイベントループにおけるイベント実行の順序

目次イベントループブラウザ環境イベントループノード環境イベントループ6つのステージ(1)setTim...

CSS floatプロパティの詳細な説明

1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...

Linux環境変数の設定に関する完全なガイド

Linux環境変数の設定ソフトウェアのインストールをカスタマイズする場合、多くの場合、環境変数を設定...

vue3 の setUp とリアクティブ関数の使用方法の詳細な説明

1. いつsetUpを実行するかvue3 ではメソッドを正常に使用できるようになったことは誰もが知っ...

JS上級編ES6の6つの継承方法

目次1. プロトタイプチェーン継承2. コンストラクタによる継承3. 組み合わせ継承4. プロトタイ...

MySQLコマンドが中国語で入力できない問題の解決方法

問題を見つける最近、MySQL コマンドを使用して MySQL サーバーに接続したときに、以下のよう...

Dockerのネットワークモードと設定方法

1. Dockerネットワークモードdocker run が Docker コンテナを作成するときに...

Linux コマンドラインからファイルを削除する実用的な方法

rm コマンドrm コマンドは、ファイルを削除するときによく使用されるコマンドです。ファイルまたはデ...

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

CSSは、閉じることができるマスクレイヤーを備えたポップアップウィンドウ効果を実装します。

実際の開発ではポップアップウィンドウがよく使われます。CSS3を勉強していたときに、閉じることができ...

JavaScriptのスリープ関数の使用

目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...