CSS2 シリーズ: Margincollapse_html/css_WEB-ITnose

マージンマージ

2 つの垂直マージンが交わると、折りたたまれたマージンが形成されます。

結合されたマージンの高さは、結合された 2 つのマージンの高さのうち大きい方と等しくなります。
理解しやすいように、内側の div を「ボックス」と呼び、この内側の div を含む外側の div を「インクルージョン」と呼びます

説明

出会う方法:

2 つの隣接するボックス (おそらくそれらは兄弟またはおそらく包含関係です) これら 2 つの要素のマージンをボーダーやパディングなどと混合することはできません。マージンが一致する場合でも、これは非常に重要です

どの方向

水平方向ではなく垂直方向である必要があります方向

折りマージンを形成する処理

1. ボックスのmargintopとそれを含むボディのmargintopで最終的な折りマー​​ジンの値を取り出します。この値をとった場合は以下のようになります 150 50=150 150 -50=100 -150 -50 =-150 -150 50 =-100
2. 隣接する2つのマージンが正の数の場合、折り畳んだ結果はどちらか大きい値になります。以下の例 2 でこれを変更できます:
3. 2 つの隣接するマージンが両方とも負の場合、折り畳まれた結果は 2 つの絶対値のうち大きい方になります。
4. 2 つのマージンが 1 つが正、もう 1 つが負の場合、折り畳まれた結果は 2 つの合計になります。
5. リレーションシップが含まれる場合、ボックスには margin-top が表示されず (margin-top がない)、包含本体には margin-top の最終値が表示されます。
6. 兄弟関係がある場合、2 人の兄弟間のマージンはこの最終値を共有します。

1つの要素の究極のケース

ブロック要素にパディングやパディングがない場合、上マージンと下マージンが互いに接触し、それらもマージされます。

例 1 には、外側の div の内側のマージン (パディング) と境界線を設定せずに、リレーションシップが含まれています。

<meta charset="utf-8"><style type="text/css">            * {margin:0;padding:0;border:0;}            #outer {width:200px;height:200px;background-color:red;margin-top:-20px;}            #inner {width:50px;height:50px;background-color:blue;margin-top:50px;}</style>

<div id="outer">  <div id="inner">  </div></div><!--不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）,内部div箱单更木有margin-top。外部用这个最大值。-->

例 2 Brotherhood

* {margin:0; padding:0;border:0;}#d1 {width:100px;height:100px;margin-top:50px;margin-bottom:50px;background-color:red;}/*改变margin-bottom:-50px;试一试*/#d2 {width:100px;height:100px;margin-top:10px;background-color:blue;}

<div id="d1"></div><div id="d2"></div><!--两个 div 之间的外边距是 50px，并不是 60px（50px + 10px）。-->

例 3 自体をマージします `` マージンはありますが、境界線やパディングはありません。この場合、上のマージンと下のマージンが一緒になり、マージされます:

* {margin:0; padding:0;border:0;}#d1{border: 1px solid red;width: 200px;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}/*border: 1px solid red;试一试将这个盒子边框加上，是不是还能合并。答案不能！*/

<div id="d1">    <div id="d2"></div></div>

写真から、赤い枠線のパッケージの高さが 200px ではなく 150px であることがわかります。含まれているボディ自体には高さがなく、ボックスの最後に折り畳まれたマージンに合わせて自動的に拡張されます。

例 3 のデバッグに関する注意点

しかし、ブラウザをデバッグしてボックスを監視する場合、折り畳まれたマージンの値は表示されません。代わりに、このボックスの設定値が表示されます。これは、最終的な折り代の値には影響しません。

例 3 質問!! 答えを探して、午後ずっと考えていました。

上記の影響を軽減するには、コードを試してください

* {margin:0; padding:0;border:0;}#d2 {height:0px;min-height:0px;margin-top:50px;margin-bottom:150px;}<div id="d2"></div>

上記のメモから、デバッグ時にこの要素を選択して 200 ピクセルを表示するのが通常ですが、この要素はブラウザーから 100 ピクセル離れていることがわかります。本当にこれは理解できません。

折りマージンを生成できません

BFC 要素は、兄弟要素や包含要素に対して折りマージンを生成しません。それで、BFCとは何ですか？次回の記事もお楽しみに。