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最適化スキルの自己実践体験

推薦する

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

1 つの記事で React における Redux の初期の使用を理解する

Redux はデータ状態管理プラグインです。React や Vue を使用してコンポーネント化された...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

MySQL 文字セットの変更に関する実践的なチュートリアル

序文: MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...

シンプルなページカウントダウンを実現するJavaScript

この記事では、参考までに、シンプルなページカウントダウンを実装するためのJavaScriptの具体的...

CSS フレキシブルレイアウト FLEX、メディアクエリ、モバイルクリックイベントの実装

フレックスレイアウト定義: Flexレイアウトの要素は、 Flex 、または略して「コンテナー」と呼...

HTML文書の基本構造(Webページ作成の基礎知識)

HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

プロキシはVue3データの双方向バインディングの原理を実現します

目次1. proxy と Object.defineProperty の利点2. プロキシ監視オブジ...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...

MySQLでグローバル変数とセッション変数を設定する2つの方法の詳細な説明

1. MySQL でグローバル変数を変更するには 2 つの方法があります。方法 1: my.ini ...

JSフロントエンドモジュール化のいくつかの仕様についての簡単な説明

目次序文フロントエンドモジュール開発の価値厄介な名前の競合面倒なファイル依存関係モジュール化の利点C...

HTMLページのヘッダーコードは完全に明確です

以下のコードはすべて <head>...</head> の間にあり、具体的な...

PHP+nginx サービス 500 502 エラーのトラブルシューティングのアイデアの詳細な説明

概要オンラインサービスへのアクセス中に 500 または 502 エラーが発生した場合、緊急処理とトラ...

Windows 8 での ssh コマンドの使用記録

1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...