マージン崩壊とは何ですか?どのような状況で現れるのでしょうか？どうやって対処すればいいのでしょうか？

この記事では、CSS ボックス モデルを理解し、マージン崩壊とは何なのかを紹介します。マージン崩壊はどのような状況で発生しますか?そして解決策について話し合います。

CSS では、すべての要素を 1 つずつ「ボックス」で囲みます。私たちはブロックレベルのボックス (ブロック ボックス) の 2 種類の「ボックス」を広く使用します。 ) とインライン ボックス (インライン ボックス)。

CSS ボックス モデルとは何ですか?

CSS では、デザインとレイアウトの際にボックス モデルが使用されます。

ボックス モデルの定義は次の部分に分割できます。

• コンテンツ ボックス : この領域はコンテンツを表示するために使用され、サイズは次のとおりです。 width と height によって設定されます。
• Padding box: コンテンツ領域の外側に囲まれた空白領域。サイズは ## によって設定されます。 #padding 関連プロパティ。
• 境界ボックス: コンテンツとパディングを折り返します。サイズは、border 関連プロパティによって設定されます。
• マージンボックス: これは最も外側の領域であり、ボックスと他の要素の間の空白スペースです。サイズは、margin 関連プロパティによって設定されます。

ブロックレベルのボックスは CSS ボックス モデルを完全に適用しますが、インライン ボックスはボックス モデルで定義されたコンテンツの一部のみを使用します。

box-sizing

box-sizing 属性は、ブラウザが要素の合計幅を計算する方法を定義します。全高。

• content-box (デフォルト値) (標準ボックス モデル)、width: 100px はコンテンツ領域を指します。幅100ピクセル。
  ボックスのサイズ =
  • content(100px) padding border
• ##border-box (代替 (IE) ボックス モデル) width: 100px は、コンテンツ領域の境界線の内側の余白 の合計を指します。幅は100ピクセルです。 ボックスのサイズ =
  content
  • padding border = 100px

どのモデルであっても、実際のサイズには余白は含まれません

- もちろん、ページ上のボックスが占めるスペースに影響しますが、ボックスの外側のスペース。

display

ここでは、内部および外部の表示タイプという概念を追加できます。

外部表示タイプ
• 、ボックスの display 属性 (inline や など) を設定します。 block 、ボックスがインライン レベルかブロック レベルかを制御します。
内部表示タイプ
• 。ボックス内の要素がどのようにレイアウトされるかを決定します。

display: flex が設定されている場合、要素では外部表示タイプは block ですが、内部表示タイプはflexに変更されます。ボックスの直接の子要素はすべて flex 要素になり、フレキシブル ボックス (Flexbox) のルールに従ってレイアウトされます。

特別な値 --

display: inline-block もあり、これはインラインとブロックの間の中間状態を提供します。これは、次の状況で非常に役立ちます: 行の折り返しは発生しませんが、幅と高さを設定できるため、ブロック レベルの効果がいくつか得られます:

Setting

width
• および height プロパティが有効になります。
padding
• 、margin、および border は、他の要素を押しのけます。

インライン要素/ブロックレベル要素

HTML4 では、要素は

inline

(インライン要素) と 2 つのカテゴリに分類されます。 block (ブロックレベル要素)。

1. インライン要素とは何ですか?

インライン要素は、対応するラベルの境界線に含まれるスペースのみを占めます。

一般的なインライン要素には、

a

、b、span、img、strong、# # が含まれます。 #sub sup、 button、 input、 label、 select、 textarea #2. ブロックレベル要素とは何ですか?

ブロック レベルの要素は、その親要素 (コンテナ) のスペース全体を占有するため、「ブロック」が作成されます。通常、ブラウザはブロックレベル要素の前後に新しい行を追加します。 一般的なブロックレベル要素には、

div

、

ul

、ol、li、dl## が含まれます。 #、dt、dd、h1、h2、 h3、h4 、 h5、h6 、p

3. 違いは何ですか?

• フォーマット (デフォルト)、インライン要素は折り返されませんが、ブロックレベル要素は折り返されます。

• コンテンツ (デフォルト) では、インライン要素にはデータとその他のインライン要素のみを含めることができます。ブロックレベルの要素には、インライン要素と他のブロックレベルの要素を含めることができます。

• 属性について:

  • インライン要素
    • width と height の設定は無効です (line-height は設定できます)、
    • 内側のマージン (padding)、外側のマージン (margin) 上下方向の境界線(border)は他の要素には影響しません。
  • #ブロックレベルの要素
    • width プロパティと height プロパティが機能します。
    パディング (
    • padding)、マージン (margin)、およびボーダー (border) は、現在の要素の周囲から他の要素を「押しのけ」ます。要素

Margin (マージン) 折りたたみ

ブロック上マージン (

margin-top) と下マージン (margin-bottom) は、サイズが 1 つのマージンの最大値である 1 つのマージンにマージ (折りたたまれます) されることがあります (または、それらが一致する場合)。が等しい場合、そのうちの 1 つだけ)、マージン崩壊 と呼ばれる動作。

何が起こるか #通常のフロー内の 2 つ以上の隣接するブロック要素の垂直方向のマージンが崩れます

隣接
• : 空ではないコンテンツ、パディング、境界線、またはクリアによって区切られていないことを指します
垂直方向
• : 垂直方向のマージンのみを指します。 ## 解決しますか?

要素

BFC
• が作成した

  とその子/兄弟は折りたたまれません Settingspadding

  /
border
• 、いくつかの特定のシナリオ:

  ## 親要素 ##margin- top は子要素の margin-top

  と重複します。
  • 隣接しているために重なりが発生するので、これで問題を解決できます。親要素の

    border-top と padding-top の値を設定して、それらを区切ることができます。

    高さ auto の親要素の margin-bottom

    は、次の
  margin-bottom
  • と重なっています。子要素。

    1 つは隣接しているために重複が発生し、もう 1 つは親要素の高さが固定されていないために発生します。したがって、親要素に border-bottom、padding-bottom を設定してそれらを分離するか、親要素の高さ max-height## を設定できます。 # と

    min-height

    もこの問題を解決できます。 はコンテンツのない要素であり、独自の margin-top と margin-bottom が重複します。

  この問題は、
  • border

    、padding、または高さを設定することで解決できます。

    float を引き起こす要因

    BFC

float (なしを除く)

overflow

(可視を除く)
• display
(表セル / 表キャプション / インラインブロック)
• position
(静的/相対を除く)
• プログラミング関連の知識の詳細については、
プログラミング ビデオ
• をご覧ください。 ！

以上がマージン崩壊とは何ですか?どのような状況で現れるのでしょうか？どうやって対処すればいいのでしょうか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。