検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose

CSS マージン縮小 (マージン縮小) 概要分析_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:43:081255ブラウズ

CSS によるマージンの縮小

a. まず、w3c ドキュメントのマージンの縮小の定義を見てみましょう:

CSS では、2 つ以上のボックス (兄弟である場合もそうでない場合もあります) の隣接するマージンを組み合わせて、この方法で結合されたマージンは折りたたまれると言われ、結果として結合されたマージンは折りたたまれたマージンと呼ばれます。

翻訳: CSS では、隣接するボックス (兄弟要素である場合もそうでない場合もあります) を 1 つのマージンに結合できます。 。 このマージンの結合はCollapseと呼ばれ、この結合されたマージンはMargins Collapseと呼ばれます。

例: 

<style type="text/css">.testBFC{    width:100px;    height:100px;    background-color:green;}.testBFC div{    width:30px;    height:30px;    background-color:pink;    }.testBFC div:first-child{    margin-bottom:10px;}.testBFC div:last-child{    margin-top:10px;}</style><div class="testBFC">    <div>div1</div>    <div>div2</div></div>

実行結果は以下のようになります。この図から、div1 の margin-bottom と div2 の margin-top がマージされていることがわかります。その結果、div1 と div2 の間には 10 ピクセルしかありません。当初はそれらを 20 ピクセル離す必要がありましたが、これを実現するにはどうすればよいでしょうか。 div1 のクラスに、display: inline-block を追加できます。 これには、マージン崩壊の問題を解決または回避する方法が含まれます。

w3c ドキュメントの特定の注記を見てみましょう:

注意 上記のルールは次のことを暗示しています:

  • フローティングボックスと他のボックスの間のマージンは折りたたまれません (フロートボックスとそのボックスの間でも)
  • 新しいブロック書式設定コンテキストを確立する要素のマージン (float や、「visible」以外の「overflow」を持つ要素など) は、そのインフローの子と一緒に折りたたまれません。
  • 絶対的に配置されたボックスのマージン(フロー内の子であっても) 折りたたまれません。
  • インライン ブロック ボックスのマージンは (フロー内の子であっても) 折りたたまれません。
  • フロー内ブロック レベル要素の下マージン兄弟にクリアランスがある場合を除き、常に次のフロー内ブロック レベルの兄弟の上マージンで折りたたまれます。
  • フロー内ブロック要素の上マージンは、次のフロー内ブロック レベルの子の上マージンで折りたたまれます。要素には上部の境界線も上部のパディングもなく、子にはクリアランスがありません。
  • 「高さ」が「auto」、「min-height」が 0 のインフロー ブロック ボックスの下マージンは、その要素によって折りたたまれます。 last in -flow block-level ボックスに下部パディングも下部境界線もなく、クリアランスのある上部マージンで子の下部マージンが折りたたまれない場合、子の下マージン。 ' プロパティはゼロで、上下の境界線も上下のパディングもなく、「高さ」は 0 または「自動」で、行ボックスとそのすべてのインフローが含まれていません。子のマージン (存在する場合) が折りたたまれます。
  • 1. フローティング ボックスは他のボックスの間で折りたたまれません。 (フローティングボックスとその通常のフローの子要素であっても折りたたまれません。) たとえば、次の例では、親要素と子要素の間で外縁が折りたたまれます。この場合、親要素で設定できます。または子要素がフローティングになった場合は正常に表示されます。 

    • <head>    <style type="text/css">        *{            margin:0;            padding:0;        }        .testBFC{            width:100px;            height:100px;            background-color:green;            margin-top:10px;        }        .testBFC div{            width:30px;            height:30px;            background-color:pink;        }        .testBFC div:first-child{            margin-top:10px;        }    </style></head><body><div class="testBFC">    <div>div1</div></div></body>

    2. 通常のフローで子要素と一緒に折りたたまれないように、要素の余白に新しいブロック書式設定コンテキストを作成します。上の例のように、属性 overflow:hidden

    3 を外側の div に追加できます。絶対に配置されたボックスは折りたたまれません。上の例では、親要素または子要素に属性 (position:absolute または fix) を追加できます。

    4. 通常のドキュメント フローでは、ブロック レベルの要素の下マージンはその次の要素の上マージンに戻ります。兄弟要素はクリアランスを設定しないと折りたたまれます。記事上部の例を参照してください。

    5. ブロックレベル要素に上境界線、上パディングがない場合、ブロックレベル要素の上マージンは、その子要素の上マージンと一緒に折りたたまれます。要素にはクリアランスが設定されていません。例: この例はすでにヒント 1 にあります。

    6. このブロックレベル要素が下パディング、下境界線、および height:auto、min-height を設定しない場合、ブロックレベル要素の下マージンはその最後のブロックレベル子要素の下マージンと重なってしまう可能性があります。 :0

    7. このようなボックスには、マージンが折りたたまれ、min-height:0、上下の境界線または上下のパディングが設定されておらず、高さ:0 または auto があり、ライン ボックスとそのすべてが含まれていません。要素の余白が折りたたまれます。

    詳細については、w3c ドキュメントを参照してください: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：form_html/css_WEB-ITnose の送信時に Enter キーを押すことを禁止する方法次の記事：form_html/css_WEB-ITnose の送信時に Enter キーを押すことを禁止する方法

    関連記事

    続きを見る