[移転]マージンの問題解決に関する議論 overlay_html/css_WEB-ITnose

通常のフローでは、隣接する 2 つ以上のブロック要素の垂直方向のマージンが崩れてしまいます。では、要素の上下のマージンが崩れるのを防ぐにはどうすればよいでしょうか。次の方法が役に立つかもしれません

1. まず第一に、それがトリガーされる状況を知る必要があります : 通常のフローでは、2 つ以上の隣接するブロック要素の垂直方向のマージンが崩れます

1. 2 つ以上の
は、その数が 1 より大きくなければならないことを意味します。また、折り畳むことは要素間の相互作用であり、A と B が折り畳まれるということはなく、B は A と折り畳まれないことを意味します。

2. 隣接する
は、空ではないコンテンツ、パディング、ボーダー、クリアで区切られていないことを意味し、それらの位置関係を示します。
分離されていない場合、要素の margin-top は、通常のフローで最初の子要素 ​​(非浮動要素など) の margin-top に隣接することになることに注意してください。要素 高さが「auto」の場合、その margin-bottom は、通常のフローの最後の子要素 ​​(非浮動要素など) の margin-bottom に隣接します。

3. 垂直方向
は、垂直方向の余白のみが折り畳まれます。つまり、水平方向の余白は折り畳まれません。

次に、要素の上下のマージンが崩れるのを防ぐにはどうすればよいでしょうか?

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

2.ブロックレベルのフォーマットを作成しました コンテキストの要素はその子要素とともにマージン折りされません (これは BFC を作成した要素を指し、その子要素は折り畳まれないことに注意してください)

BFC をトリガーするのは、 float (none を除く)、overflow (visible を除く)、display (table-cell/table-caption/inline-block)、position (static/relative を除く) です

明らかに、隣接を妨げる要因があることがわかります。折りたたみの要素は BFC 要素のサブセットをトリガーします。つまり、上下の隣接する要素に overflow:hidden を設定すると、BFC がトリガーされても、上下の要素の上下のマージンは折りたたまれます。
この問題は実際には BFC とは何の関係もありません。BFC を悪用しないでください。BFC を作成する本来の目的は、要素自体 (そのサブ要素を含む) を正しく実行できるようにすることだけです。幅と高さを計算します。 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts

折りたたまれない要因は、floating 要素、inline-block 要素、および絶対配置要素です。 BFC は、overflow:hidden を使用して作成することもできるため、BFC 要素のサブセットを作成しても、BFC によって作成された要素が折りたたまれないことを意味するわけではありません。逆に、親要素が BFC をトリガーすると、そのブロックレベルの子要素が代わりに折りたたまれます。

ここで、この問題を説明するためにデモを作成しました: http://whycss.com/demo/collspan_demo.html BFC を作成する 3 つの状況について説明します。その結果、子要素の上下のマージンは次のようになります。崩れ落ちた。

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

この問題を最終的に解決する方法について、私の提案は、同じ行にマージンを使用してみることです。実際には各要素に float、inline-block、absolute を設定する必要がない場合があるためです。