CSSの詳細説明 margin_html/css_WEB-ITnose

出典: https://blog.coding.net/blog/css-margin

この記事は、見つけるのが簡単ではないマージンに焦点を当てています私たちの日常生活の中にある「落とし穴」。

ボックス モデル

CSS を使用したことがある人なら誰でも CSS ボックス モデルを知っているはずです。

コンテンツ エッジで囲まれています (コンテンツ エッジ) ） 形成されるのはコンテンツボックス（Content Box）で、類推するとパディングボックス（Padding Box）、ボーダーボックス（Border Box）、マージンボックス（Margin Box）があります。

コンテンツ ボックス、パディング ボックス、境界ボックスの背景は背景属性によって決まりますが、マージン ボックスの背景は透明です。

CSS margin プロパティ

margin プロパティについては、私たちの直感と一致しない可能性のある点がいくつかあります。

• margin の値ががパーセンテージである場合、親要素の コンテンツ ボックスの幅 (margin-top と margin-bottom も含む) を基準にして計算されます。したがって、親要素の高さと幅が等しくなく、子要素のマージン要素に同じパーセンテージ値が指定されている場合でも、計算された子要素のマージン値はすべての方向で等しくなります。
• margin-top および margin-bottom の値は、非置換インライン要素 では無効です。したがって、インライン要素 (i、span など) を置き換える代わりに、img 要素の margin-top と margin-bottom を指定できます。また、margin-top と margin-bottom を設定しても効果はありません。

隣接マージン (隣接マージン)

2 つの垂直マージンがある場合、それらの間に他の垂直マージンはありませんが、それらは必ずしも互いに接触しているわけではない、と言われます。これら 2 つのマージンは 垂直に隣接している (垂直隣接) ことを示します。これには次の 4 つの状況が含まれます。そのうちの 1 つで十分です。

• 親要素の上マージンと3 番目 子要素の上マージン
• 親要素の下マージンと最後の子要素の下マージン
• 要素の下マージンと兄弟要素の上マージンこの要素に隣接
• 要素が BFC を生成せず、通常のフローの子要素を含まず、min-height が 0、高さが 0 または auto の場合、その上マージンと下マージンも垂直方向に隣接します

2 つのマージンが次の 3 つの条件を満たす場合、これら 2 つのマージンは 隣接している (隣接している) と言います:

これら 2 つのマージンは 垂直に隣接しています への変換、つまり、上記の 4 つの条件のいずれかを満たす 2 つの要素

マージンは、どちらも通常のフローのブロックレベルの要素であり、同じ BFC 内で 2 つの要素の間の

マージン ラインボックス(ラインボックス)はなく、フローティング後のクリアランス、パディングとボーダー

マージンの折りたたみ (Collapsing margins)

マージンの折りたたみ、つまり 隣接 マージンは 1 つにまとめられる場合があります。

たとえば、次のように、要素 #a は 10px の margin-bottom を指定し、その下の要素 #b は 20px の margin-top を指定します。

Element # a の margin-bottom と要素 #b の margin-top の位置が重なっており、その間の距離は要素 #b の下マージンの長さになります。これがマージン崩れの現象です。この現象については、次のように理解できます:

margin は、他のボックスとの間の最小距離を定義します。要素 #a は 10 ピクセルの margin-bottom を指定します。これは、その下の要素 #b がその要素から少なくとも 10 ピクセル離れている必要があることを意味します。そのため、実際の距離はこれよりも大きくなる可能性があります。

要素 #a の下の要素 #b も、margin-top が 20px に設定されています。折り畳まれていない場合、それらの間には 30px の距離があります。 20px の距離まで折りたたむ場合、要素 #a のマージン-ボトムの要件は少なくとも 10 ピクセルである必要があり、これは満たされますが、要素 #b のマージン-トップの要件は少なくとも 20 ピクセルの距離である必要があります。も満足です。

余白折りの存在は、実際には視覚的により美しく、デザイナーの期待に近づけるために行われます。

余白折りルール

すべての余白を折り畳むことができるわけではありません。次の条件を満たす必要があります。

• 垂直 隣接 です。折りたたむことが可能ですが、水平方向のマージンは決して折りたたまれません
• ルート要素 (つまり、HTML 要素) のマージンは決して折りたたまれません
• 要素の場合、その上マージンと下マージンは が隣接しており、フローティング後にクリアランスがあります。この要素のマージンは兄弟要素のマージンと折り畳むことができますが、折り畳まれたマージンは親要素の下マージンと折り畳むことはできません。

なお、余白の折り込みは一度だけでなく、要件を満たす複数の余白を折り畳んで余白潰し(潰れた余白)を形成することも可能です。

そして、この折り畳まれたマージンがマージン A などによって折り畳まれている場合、マージン X とマージン A が隣接している場合、マージン X とこの折り目は は に隣接しています。

折りたたまれたマージン サイズ

2 つ以上のマージンが折りたたまれている場合、マージンの値は次のように計算されます。

• マージンがすべて正の数の場合、次のように計算されます。その中の最大値
• 正のマージンと負のマージンがある場合は、正の最大値と負の最小値を加算します (たとえば、最大マージンが 20px、最小マージンが -20px である場合、最終的なマージンが計算されます)値は 0)
• マージンがすべて負の数値の場合は、その中の最小値を取ります

考慮すべきいくつかの質問

浮動小数点、配置された要素のマージンは、その子要素を含む他の要素のマージンと重なりません。

これは、浮動要素が通常のフローから外れているため、その要素と他の隣接する要素は同じフロー内になく、当然隣接していないためです。フローティング要素 コンテンツ ボックスは新しい BFC を形成するため、フローティング要素と子要素は同じ BFC 内にないため、マージンを折りたたむことはできません。要素の位置決めにも同じことが当てはまります。

インラインブロック要素は、その子要素を含む他の要素のマージンと一緒に折りたたまれません。

マージンの折りたたみはブロック レベルの要素でのみ発生するため、インライン ブロック要素のマージンは兄弟要素では折りたたまれず、インライン ブロックのコンテンツ ボックスは新しい BFC を形成するため、 、 inline-block 要素自体は子要素の margin で折り畳まれません

margin 複数の栗を折ります

Chestnut 1

2 つの margin が一致する場合次の 3 つの条件。これら 2 つのマージンが 隣接 (隣接) であるとします。

• 2 つのマージンの間にライン ボックスがなく、フロート クリアランスをクリアした後、パディングand borders

この状態を目指して、パディングを追加することでマージンが折りたたまれるのを防ぎます。

#container に下ボーダーがない場合、 #container の下マージンと #inner の下マージンが隣接しているので折り畳まれ、#inner で #container 要素が開くので #container が見える 要素の高さは 10px になり、 #inner の赤い背景が表示されます

#container に下枠を追加すると、2 つの余白の間に境界バリアがあり、それらは 隣接しなくなります したがって、折りたたむことはできません。 #container が 20px に引き伸ばされていることがわかります。そのうち 10px は #inner の高さ、10px は #inner の下のマージンであり、マージンは透明なので、#container は青い背景の一部を露出させます。

栗 2:

2 つのマージンが次の 3 つの条件を満たす場合、2 つのマージンは 隣接している (隣接している) と言います:

• margin の両方の要素は通常のフローを持つブロックレベルの要素であり、同じ BFC 内にあります

新しい BFC 折りたたみを作成することでマージンが発生するのを防ぎます:

上記のように、 #container 要素と #inner 要素は同じ BFC に属しており、 #container の上マージンと #inner の上マージンが折り畳まれ、下マージンが折り返されます。同じです。

ただし、#container と #inter が異なる BFC にある場合は、次のように上マージンも下マージンも折りたたまれません。

Give The #container 要素は overflow: hidden 属性を追加するため、そのコンテンツ ボックスは独立した BFC を生成します。#inner はこの独立した BFC 内にあるため、#container と #inner は 2 つの異なる BFC 内にあるため、マージンを折りたたむことはできません。

栗 3:

• 要素の上マージンと下マージンが に に隣接しており、明確なフロート Clearance (クリアランス) がある場合、この要素のマージンは兄弟要素のマージンと折り畳むことができますが、折り畳まれたマージンは親要素の下マージンと折り畳むことはできません。

親要素 #container に灰色の背景を設定し、高さを設定しないため、高さはコンテンツに応じて拡張され、マージンは 50px に設定されます。

高さと幅が 40px に設定された赤いフローティング要素 #floated があります。

は #cleared に 15 ピクセルのマージンを設定し、要素の高さ、パディング、マージンはすべて 0 であるため、#cleared 要素の上マージンと下マージンは 隣接します。この要素の位置は以下のとおりです。

#cleared 要素は左側の float をクリアするため、#cleared 要素は下に移動します。 #cleared 要素と #slibling 要素の余白が折りたたまれているため、それらの位置が重なっていることがわかります。

このルールの存在により、折りマージンは#containerの下マージンで折り畳むことができず、#containerの高さが引き伸ばされてしまいます。

このルールがなければ、次のように #container の下マージンで折りたたむ必要もあります:

上の図は、#cleared 要素のclear 属性を削除した後、このルールを満たしていないため、#container の高さは赤いフローティング要素の高さである 40px のみであることがわかります。 Clear 要素、#sibling 要素、#container 要素のマージンがすべて 1 つに折りたたまれます。