問題の説明今日、ページ スタイルを変更していたときに、子要素に 今日は、問題全体の原因と解決策についてお話します。 問題分析MDN には次のようなテキストがあります: ブロックの上部マージン ( マージン崩壊が発生する状況は 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; } </スタイル> 解決:
注意: 親要素のマージンを 0 3. 空のブロックレベル要素要素 B の <div class="top">トップ</div> <div class="middle"></div> <div class="bottom">下</div> <スタイル> .上、.下 { 幅: 50px; 高さ: 50px; 背景: ピンク; } 。真ん中 { 上マージン: 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タグはダウンロードボタン機能を隠します
PHPの仕組みまず、よく耳にするcgi、php-cgi、fastcgi、php-fpmの関係を理解し...
1. 角を丸くする今日の Web デザインは、常に最新の開発テクノロジーに追随しており、HTML5 ...
Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...
序文スロークエリとは何か、またスロークエリを最適化するにはどうすればよいか。以下では、これら 2 つ...
前面に書かれたWeibo コンポーネントは、サードパーティのアクセス ユーザーが開発を必要とせずに ...
同僚から、LINUX サーバー上の多くのコマンドが (コマンドが見つかりません) というプロンプトで...
MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...
1. なぜパッケージングを行うのですか?全体的なコード呼び出し、リクエストの公開処理、パーソナライズ...
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
目次背景glibc 2.14をコンパイルするソフトリンクを変更するやっと背景テスト環境には Cent...
序文Linux システムのパフォーマンスを監視するために使用できるオープンソースの監視ツールが市場に...
この記事では、Vue.jsの具体的なコードを共有して、シンプルな折りたたみパネルを実装する例を紹介し...
以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...
1. ネットワークの最適化YSlowには23のルールがあります。これら数十のルールは、主に、不要な...
前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...