子要素の 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タグはダウンロードボタン機能を隠します

推薦する

nginx+php実行リクエストの動作原理の詳細な説明

PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...

ウェブフロントエンド開発者が知っておくべき 9 つの実用的な CSS プロパティ

1. 角を丸くする今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 ...

Dockerコンテナ同士を接続する3つの方法の詳しい説明

Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...

MySQL の遅いクエリとクエリ再構築方法の記録

序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...

ウェブサイト上のWeiboコンポーネントの再設計の詳細な紹介(写真とテキスト)

前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...

元のPATHを上書きしてコマンドが見つからないというメッセージが表示されるコマンド失敗の問題を解決する方法

同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...

複数のフィールドを変更するためのMysql更新の構文の詳細な分析

MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...

Axios の二次カプセル化の例 プロジェクトのデモ

1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...

フォーム送信ページの更新がジャンプしない

1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...

CentOS6 アップグレード glibc 操作手順

目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...

Bash スクリプトを使用して Linux のメモリ使用量を監視する方法

序文Linux システムのパフォーマンスを監視するために使用できるオープンソースの監視ツールが市場に...

Vue.jsはシンプルな折りたたみパネルを実装します

この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...

Linuxはscpコマンドを使用してファイルをローカルコンピュータにコピーし、ローカルファイルをリモートサーバーにコピーします。

以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...

フロントエンドネットワーク、JavaScriptの最適化、開発のヒントについて簡単に説明します。

1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...

事例を通してLinux NFSの仕組みを詳細に分析

前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...