CSS マージンの折りたたみの詳細な説明

CSS マージンの折りたたみの詳細な説明

前の

これは古くからある古典的な質問です。以前読者から質問があったので、ここでお答えします。

簡単な例から始めましょう

簡単な例を見てみましょう。

<スタイル>
    .slide1 div {
      マージン:10px 0;
    }
  </スタイル>
 <div class="slide1">
    <h3>マージン相殺タイプ 1: 兄弟要素</h3>
    <p>テキストの上下の間隔は 10 ピクセル</p>
    <p>テキストの上下の間隔は 10 ピクセル</p>
  </div> 

この例の 2 つのpタグを見てください。スタイル定義によると、最初のpmargin-bottomと 2 番目のpmargin-topどちらも 10px なので、実際の距離は 20px になるはずです。ただし、ブラウザーで確認すると、最終的な margin は10pxであることがわかります。 一例として、マージンの折りたたみが挙げられます。ブロックレベル要素の上部と下部のマージンが 1 つのマージンに結合される (または折りたたまれる) ことがあります。

分類

マージン崩壊には、基本的に 3 つのケースがあります。

  1. 隣接する要素
  2. 親要素と最初の子要素(または最後の子要素。後で、なぜ最初または最後の子要素なのかを思い出してください)
  3. 空のブロックレベル要素

急いで暗記しないでください。まず、前の記事の例は最初のケースです。マージンの崩壊は、隣接する 2 つの要素間で発生します。

2番目と3番目のケースは次のとおりです。


<スタイル>
    。父親 {
      背景色: 緑;

    }
    。子供 {
      上マージン: 50px;
      背景色: 赤;
      高さ: 300px;
    }
    
      .スライド3 {
      マージン: 10px 0;
    }
  </スタイル>
  <h3>2 番目のマージンの縮小: 親要素と最初の子要素</h3>
  <div class="slide2 父">
    <!-- 親要素は緑色です -->
    <div class="slide2 子">
      <!-- 子要素は赤です -->
    </div>
  </div>
  <h3>第 3 マージンの縮小: 空のブロックレベル要素</h3>
  <div class="slide3"></div>

それらの画像も以下に示します。

ケース2: 子要素の余白が親要素の外側に「転送」される

ケース3: 要素の上下の余白がなくなる

さて、これらの状況の共通点を見てみましょう(ボックスモデルを描くことをお勧めしますが、描くのが面倒なので-_-)、マージンの崩壊の共通の原因は、マージンが何の障害もなく直接接触していることです。

直接接触をどのように理解すればよいでしょうか?とても簡単です:

  • 最初の例では、2 つの<p>タグの垂直marginが直接接しています。
  • 2 番目の例では、親要素のpaddingborder両方とも 0 であるため、 marginとその子要素も直接接触しています。 (この例はボックスモデルを描くと分かりやすいです)
  • 3番目の例では、空要素自体の上部と下部の余白も直接接しています( paddingborderも0です)

様々なケースでの折り畳みの結果

折り畳み後の余白を計算する方法は簡単に確認できます。

  • 両方のマージンが正の場合、折り畳み後に大きい方のマージンが使用されます。
  • 一方のマージンが正でもう一方が負の場合、折り返しマージンはマージンの合計になります。
  • 両方のマージンが負の場合、縮小されたマージンは小さい方のマージンの合計になります。

余白が崩れるのを防ぐ方法

前述のように、マージンの崩壊の原因は、マージンが直接接触していることです。したがって、崩壊を防ぐ方法は、この直接接触をブロックすることです。方法の組み合わせは次のとおりです。

  • ネストされたケースでは、 border paddingが 0 でないか、親要素にテキスト行を追加するなど、分離するinline要素がある限り (ケース 2 で直接試すことができます)
  • フローティング、 display:tableなど、BFC の助けを借りてバリアを形成する方法。( BFCに慣れていない学生は最初に確認してください。後で記入します)

まとめ

上記で説明したのは基本的な状況であることを付け加えておきます。基本的な状況では、複数の隣接する要素間や、子孫要素の複数層のネストなどの組み合わせも作成できます。基本原理を理解すれば、小さなデモを作成して検証する限り、他の状況も簡単に理解できるようになります。それから、慣例があります。内容に間違いがあったら指摘してください(読んでいて不快に感じたり、文句を言いたくなったりしても全く問題ありません)。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

元のアドレス: https://segmentfault.com/a/1190000016842993

<<:  カルーセル効果を実現するための純粋なjs

>>:  Nofollowはコメントやメッセージ内のリンクを本当に機能させる

推薦する

Docker の win ping 失敗コンテナ回避ガイド

win docker-desktopを使ってコンテナ開発に接続し、ネットワーク上で色々試してみたいと...

MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...

Linux nslookup コマンドの使用方法の詳細な説明

[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...

フロントエンド HTML+CSS+JS を使用してシンプルな TODOLIST 関数を開発する (メモ帳)

目次1. 簡単な紹介2. スクリーンショットを実行する3. コードの紹介4. まとめ1. 簡単な紹介...

異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法

新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...

HTML レイヤード ボックス シャドウ効果のサンプル コード

まず、画像を見てみましょう。今日はこのエフェクトを作成します。 実は、何でもないんです。Web ペー...

Vue3.0 ルーティング自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

Ubuntuはカーネルモジュールをコンパイルし、その内容はシステムログに反映されます。

目次1.Linuxログインインターフェース2. コードを書く3. Makefileを書く4. コンパ...

CSS における zoom:1 属性の定義と機能

今日、CSS の zoom 属性は何のために使用されるのかと尋ねられました。この属性は、フローティン...

Docker を使用して Spring Boot をデプロイする方法の例

ここでは主に、スタンドアロンのプログラムを生成できるspring-bootと、Mavenプラグインd...

MySQLトランザクションとMySQLログの詳細な説明

取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...

JavaScript 文字列の一般的なメソッドの詳細な説明

目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...

CSS を使用して物流の進行状況のスタイルを実装するためのサンプルコード

効果: CSS スタイル: <スタイル タイプ="text/css">...

HTML ウェブページハイパーリンクタグ

HTML ウェブ ページのハイパーリンク タグの学習チュートリアル リンク タグの属性 リンクは、ウ...

Dockerで作成したコンテナを削除する方法

Dockerで作成したコンテナを削除する方法1. まず、docker -s -aコマンドを使用してす...