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

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 描画三角形アイコン