子要素の margin-top によって親要素が移動する問題の解決方法

問題の説明

今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要素と親要素の間に隙間が作られないという状況に遭遇しました。代わりに、親要素に作用し、親要素にmargin-top効果が生じました。

今日は、問題全体の原因と解決策についてお話します。

問題分析

MDN には次のようなテキストがあります:

ブロックの上部マージン ( margin-top ) とmargin-bottom bottom ) は、個々のマージンの最大サイズになる単一のマージンに結合される (折りたたまれる) 場合があります。この動作は、邊距折疊呼ばれます。 注意: 折りたたまれるのは上と下の余白のみで、左と右の余白は折りたたまれません。

マージン崩壊が発生する状況は 3 つあります。

1. 同じレイヤー上の隣接する要素間

<div class="A">要素 A</div>
<div class="B">要素 B</div>

<スタイル>
.A、
.B {
  幅: 50px;
  高さ: 50px;
}
.A {
  背景: 黄色;
  下マージン: 10px;
}
.B {
  背景: ピンク;
  上マージン: 20px;
}
</スタイル>

上記の 2 つの p タグ間のスペースは 20 px です。

解決：

2番目の要素Bはclearfixを設定する

.clearfix::after {
    コンテンツ： "";
    表示: ブロック;
    クリア: 両方;
    高さ: 0;
    オーバーフロー: 非表示;
    可視性: 非表示;
}

.clearfix {
    ズーム: 1;
}

2. 親要素と子要素の間にコンテンツがない

この例では、A 要素と B 要素および親要素ボックスの間に他の要素はありません。

<div class="box">
    <div class="A">要素 A</div>
    <div class="B">要素 B</div>
</div>
<div class="next">次へ</div>

<スタイル>
。箱 {
  上マージン: 10px;
  下マージン: 10px;
  背景: #eee;
}
.A、
.B {
  幅: 50px;
  高さ: 50px;
}
.A {
  背景: 黄色;
  上マージン: 20px;
}
.B {
  背景: ピンク;
  下マージン: 20px;
}
。次 {
  高さ: 50px;
  背景: #eee;
}
</スタイル> 

解決：

• 親要素はブロックレベルの書式設定コンテキスト（ overflow:hidden ）を作成します。
• 親要素は上下の境界線を設定します（ border: 1px solid transparent ）
• 親要素は上部と下部のパディングを設定します（ padding: 1px 0 ）
• サブ要素はfloatまたはpositionによって配置されます。

注意: 親要素のマージンを 0 margin: 0に設定しても、最初または最後の子要素のマージンは親要素の外側に「はみ出します」。

3. 空のブロックレベル要素

要素 B のmargin-top要素 A のmargin-bottomに直接接続されている (つまり、中央の要素にコンテンツがない) 場合、境界線の崩壊も発生します。

<div class="top">トップ</div>
<div class="middle"></div>
<div class="bottom">下</div>

<スタイル>
.上、.下 {
  幅: 50px;
  高さ: 50px;
  背景: ピンク;
}
。真ん中 {
  上マージン: 10px;
  下マージン: 20px;
}
</スタイル> 

解決：

• 中央の要素はフロートをクリアします: clearfix
• 中央の要素はブロックレベルの書式設定コンテキストを作成します: overflow: hidden
• 中央の要素はインライン ブロック要素に設定されています: display: inline-block;
• 中央の要素の高さを設定します: height: 1px;
• 中央の要素の最小の高さを設定します: min-height: 1px;
• 中央の要素の境界線を設定します: border-top: 1px solid transparent;
• 中央の要素のパディングを設定します: padding-top: 1px;

予防

• 折り畳みに関係する余白に負の値が含まれている場合、折り畳み余白の値は、最大の正の余白と最小の負の余白（つまり、絶対値が最大の負の余白）の合計になります。つまり、-10px、10px、30px を重ねると、余白の範囲は 30px - 10px = 20px になります。
• 折り畳みに関係するすべての余白が負の場合、折り畳み余白の値は最小の負の余白の値になります。このルールは隣接する要素とネストされた要素に適用されます。

参考リンク https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

子要素 margin-top が親要素の移動を引き起こす問題を解決する方法についての記事はこれで終わりです。子要素 margin-top が親要素の移動を引き起こすことの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。