外国CSSボックスモデルのマージン(余裕)が詳細に折り畳まれます

最近崩壊し、私は多くの情報を別のオンラインアクセス後打撲とボロボロ作られ、整理を行うと同時に、時に忘れて、将来のアクセスを容易にするため、まとめることですプロジェクトは、外国CSSボックスモデルのマージン(余白)ケースに遭遇した書きましたまた、ユーザーの参照の大多数のため。場所の特徴の間違った、または不完全な要約した場合、ユーザーの大半はHuanyinは語りました。

マージン概念折りたたみ:いわゆる外側マージンは、垂直方向の外縁からの距離にマージされます2つ以上の隣接要素(子要素を含む場合)に折り畳まれます。

外国CSSボックスモデルのマージン(余白)の一般的なシナリオは、折りたたまれた以下の2種類があります。

1.隣接兄弟なし子要素

折り畳みマージントリガ条件:折り畳まれたマージンは、他の要素の二つの非空要素の間に間隔をあけたときにトリガされません。

説明の状況:
1)2つの要素が正のマージン、2つの要素間のマージン= MAX(マージン1、margin2)であれば、
簡単な説明:

clipboard.png

2)図2に示される二つの要素の負のマージン、2つ(マージン1、magin2)間のマージン=分、として、
簡単な説明:

clipboard.png

二つの要素がある場合3)マージンは、正、負、=マージン1 + margin2、マージン= -50px + 25ピクセル= -25px図IIIに示す両者の間のマージンです。
clipboard.png


ケース2、サブエレメントの親要素の発生を外部から折り畳まれます

トリガーは、外部境界(ボーダー)、無パディング(詰め物)、及び要素間の何もないが、空気なしの親要素は、テキスト情報またはテキスト情報が空要素以上のもの(親要素と上側要素と親との間の上部サブ要素の子要素ではない場合、親要素の下位サブ要素と下側、またはベースラインの親要素の最上部に折り畳まれたエッジの最下縁との間の非空要素及びテキスト情報)が存在してもよいです。
説明の状況:
1)親要素のマージン値と子要素は正で、折り畳まれたマージン= MAX(マージン1、margin2)の場合、図4に示します。
の簡単な説明:

clipboard.png

2)親要素および子要素の場合マージン値は負、折り畳まれたマージン=分(マージン1、margin2)、図5です。

clipboard.png

3)親要素および子要素は、正、負を有するマージンは、折り畳まれたマージン= minmargin1 + margin2は、図6に示す場合。

clipboard.png

おすすめ

転載: www.cnblogs.com/homehtml/p/12215981.html