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

子要素の 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 をよろしくお願いいたします。

<<:  Linux Centos8 CA証明書作成チュートリアル

>>:  HTMLページのネイティブVIDEOタグはダウンロードボタン機能を隠します

推薦する

Reactのref属性を深く理解する方法

目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...

MySQL移行計画と落とし穴の実践記録

目次背景解決策1: 古いデータをバックアップするオプション2: テーブルを分割する解決策3: tid...

Reactプロジェクトの新規作成からデプロイまでの実装例

新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...

MySQL テーブルとデータベースでデータを分割する方法

目次1. 縦方向のスライス1.1 垂直データベース1.2 垂直テーブル分割2. 水平(横断)セグメン...

純粋な CSS カスタム複数行省略記号の問題 (原理から実装まで)

テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...

Vue3.0はドロップダウンメニューのカプセル化を実装します

Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...

Reactフックの仕組み

目次1. React フックと純粋関数2. シンプルなmyUseState 3. myUseStat...

純粋な JS を使用して vue.js で双方向バインディング機能を実装する方法

目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...

Linux の一般的なハードディスク管理コマンドの紹介

目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...

React tsx はランダムな検証コードを生成します

React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...

WeChat ミニプログラム ユーザー認証のベストプラクティス ガイド

序文WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることが...

Ubuntu 18.04 でソースコードから Odoo14 をインストールするチュートリアル

目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...

mysql のファイル mysql-bin.000001 とは何ですか? 削除できますか?

ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...

Docker 経由で wsl の tar ファイルを作成する方法

最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...