[CSSチュートリアル】子要素のmargin-topが親要素の移動を引き起こす問題解決

問題の説明

本日、ページスタイルの修正中に、子要素の設定で問題が発生しました margin-top が、子要素を親要素から離すのではなく、親要素に作用して、親要素が margin-top の効果が得られます。

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

問題分析

MDNの上に、こんな文章があります。

ブロックの上部外側の余白( margin-top ) と下の余白 ( margin-bottom )が一つの余白にまとめられる(折りたたまれる)ことがあり、その大きさは、シングルマージン 最大 この動作は Margin Collapse . 注：折りたたまれるのは上下の余白のみで、左右の余白は折りたたまれません。

余白が折りたたまれるケースは3つあります。

1. 同じレベルで隣接する要素間

<div class="A">element A</div>
<div class="B">element B</div>

<style>
.A,
.B {
  width: 50px;
  height: 50px;
}
.A {
  background: yellow;
  margin-bottom: 10px;
}
.B {
  background: pink;
  margin-top: 20px;
}
</style>

上の2つのpタグの間隔は20pxです。

画像

解決策

2 番目の要素 B にクリアフロート clearfix を設定する。

.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
}

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

要素A、Bと親要素ボックスの間に他の要素がない例。

<div class="box">
    <div class="A">element A</div>
    <div class="B">element B</div>
</div>
<div class="next">Next</div>

<style>
.box {
  margin-top: 10px;
  margin-bottom: 10px;
  background: #eee;
}
.A,
.B {
  width: 50px;
  height: 50px;
}
.A {
  background: yellow;
  margin-top: 20px;
}
.B {
  background: pink;
  margin-bottom: 20px;
}
.next {
  height: 50px;
  background: #eee;
}
</style>

画像

解決策

• 親要素はブロックレベルの書式コンテキストを作成します ( overflow:hidden )
{を使用します。 親要素が上下のボーダーを設定する( border: 1px solid transparent ) {を使用します。 親要素は、上下のパディングを設定します ( padding: 1px 0 ) {を使用します。 子要素は float float または位置決め position の中にあります。

注意：親要素のマージンを0に設定しても margin: 0 のマージンは、親要素の外側に「はみ出る」ことになります。

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

要素Bの margin-top に直接貼り付けられます。 margin-bottom というときに ( ということは、真ん中の要素には内容がない ) の場合、境界の折りたたみも発生します。

<div class="top">top</div>
<div class="middle"></div>
<div class="bottom">bottom</div>

<style>
.top,.bottom {
  width: 50px;
  height: 50px;
  background: pink;
}
.middle {
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>

画像

解決策

• middle element clear float: clearfix
{を使用します。 middle element creates block-level formatting context: overflow:hidden {を使用します。 {を使用します。 middle element set as inline-block element: display: inline-block; {を指定します。
• middle element set to height: height: 1px; 高さ
• middle element set minimum height: min-height: 1px;
• middle element set border: border-top: 1px solid transparent;
{を使用します。 middle element set padding: 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が親要素を移動させる内容は、スクリプトハウス過去記事を検索するか、次の関連記事を引き続きご覧ください、私はあなたが将来よりスクリプトハウスをサポートして願っています！。