マージンの重複問題を解決する方法

マージンの重複問題を解決する方法
1. まず、2つ以上の隣接する通常フローブロック要素の垂直マージンの崩壊を引き起こす原因を知る必要があります。

1. 2 つ以上は、数量が 1 より大きい必要があることを示し、折り畳みが要素間の相互作用であることを示します。A と B は折り畳まれるが、B は A と折り畳まれないという現象は存在しません。

2. 隣接とは、空でないコンテンツ、パディング、境界線、またはクリアによって分離されていないことを意味し、位置関係を示します。
分離されていない場合、要素の margin-top は通常フロー (非フローティング要素など) の最初の子要素の margin-top に隣接します。要素の高さが「auto」の場合にのみ、その margin-bottom は通常フロー (非フローティング要素など) の最後の子要素の margin-bottom に隣接します。

3. 縦方向とは、特定の方向を指します。縦方向の余白のみが折り畳まれます。つまり、横方向の余白は折り畳まれません。

2. では、要素の上下の余白がつぶれないようにするにはどうすればよいでしょうか?

1. フローティング要素、インラインブロック要素、絶対配置要素のマージンは、垂直方向の他の要素のマージンと相殺されません(これは上下に隣接する要素を指すことに注意してください)。

2. ブロックレベルの書式設定コンテキストを作成する要素は、その子要素の余白を折りたたまない(これは、BFCを作成する要素とその子要素が折りたたまれないことを意味することに注意してください)

BFC をトリガーする要因は、フロート (none を除く)、オーバーフロー (visible を除く)、表示 (table-cell/table-caption/inline-block)、位置 (static/relative を除く) であることは誰もが知っています。

明らかに、隣接する要素が折りたたまれるのを防ぐ要因は、BFC をトリガーする要因のサブセットであることがわかります。つまり、上下の隣接する要素に overflow:hidden を設定すると、BFC がトリガーされますが、上下の要素の上下の余白は折りたたまれます。

この問題は、実際には BFC とは何の関係もありません。皆さんが BFC を乱用しないことを願っています。BFC は万能ではないことを知っておく必要があります。BFC を作成した本来の目的は、要素自体 (その子要素を含む) が幅と高さを正しく計算できるようにすることです。 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

折り畳みが行われない原因となる要因は、フローティング要素、インライン ブロック要素、絶対配置要素です。これは、BFC を作成する要因のサブセットにすぎませんが、BFC は overflow:hidden でも作成できるため、BFC を作成する要素が折り畳まれないことを意味するものではありません。逆に、親要素が BFC をトリガーすると、そのブロックレベルの子要素が代わりに折りたたまれます。

ここで、この問題を説明するためのデモを作成しました: http://whycss.com/demo/collspan_demo.html BFC を作成する 3 つの状況が説明されており、その結果、子要素の上部と下部の余白が失われます。

Kejun が最後に言及したのは、ズームです。これは、もともと IE ブラウザでサポートされていたズーム属性です。現在、WebKit コアを搭載した最新のブラウザのみがこれをサポートしています。ただし、hasLayout は IE8 より前のブラウザーでのみ正常にトリガーされ、IE 以外のブラウザーには影響がないため、同じ方法で BFC を作成する必要があります。 hasLayout と BFC の紹介については、私のブログ記事 http://www.smallni.com/?p=174 を参照してください。

この問題を解決する方法としては、実際には各要素に float、inline-block、absolute を設定する必要がない場合もあるため、書き込み時に上または下に設定するなど、同じ方向のマージンを使用することをお勧めします。

<<:  Linux システム AutoFs 自動マウント サービスのインストールと構成

>>:  Html+CSS 描画三角形アイコン

推薦する

ウェブ開発におけるクロスドメインの理由に対する複数のソリューション

目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...

LeetCode の SQL 実装 (181. 従業員は管理職よりも収入が高い)

[LeetCode] 181.従業員の収入が管理職よりも多い従業員テーブルには、マネージャーを含む...

CSS3に基づいてiPhoneを描く

結果:実装コードhtml <div class='iphone'> &l...

MySQLのさまざまなオブジェクトのサイズと長さの制限について話しましょう

目次識別子の長さ制限権限テーブルの範囲フィールドの長さ制限データベースとテーブルの数の制限テーブルサ...

HTML でフォントの色を設定する方法と、PS を使用して HTML で正確なフォントの色を取得する方法

1. HTMLフォントカラー設定HTML では、フォント タグを使用してフォント コンテンツの色を設...

MySQL 8.0.20 Window10無料インストール版設定とNavicat管理チュートリアルグラフィック詳細説明

1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...

Tomcat 経由で JMX 監視を有効にする方法

シミュレーション環境を構築する:オペレーティングシステム: centos7メモリ: 1G 1.8.0...

1 行のコードでさまざまな IE 互換性の問題を解決します (IE6-IE10)

x-ua-compatible は、IE ブラウザがページを解析およびコンパイルするためのモデルを...

6つの珍しいHTMLタグ

まず: <abbr> または <acronym>これら 2 つの記号は同じ意...

json.stringify() と json.parse() の違いと使い方

1. JSON.stringify() と JSON.parse() の違い私たちは皆、JSON.s...

インデックスを設計する際の原則は何ですか? インデックスの障害を回避するにはどうすればよいでしょうか?

目次主キーインデックス頻繁にクエリされるフィールドのインデックスを作成する大きなフィールドのインデッ...

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

Centos7.9 で独立したメール サーバーを構築するための詳細な手順

目次序文1. イントラネットDNS AレコードとMXレコードを構成する2. メールサーバの初期化設定...

Docker CPU 制限の実装

1. --cpu=<値> 1) コンテナが使用できるCPUリソースの量を指定しますが、コ...

Nginx のステータス監視とログ分析の詳細な説明

1. Nginx ステータス監視Nginx には、Nginx の全体的なアクセス ステータスを監視す...