問題の説明今日、ページ スタイルを変更していたときに、子要素に 今日は、問題全体の原因と解決策についてお話します。 問題分析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タグはダウンロードボタン機能を隠します
目次概要1. Refsオブジェクトの作成1.1 React.createRef() 1.2React...
目次背景解決策1: 古いデータをバックアップするオプション2: テーブルを分割する解決策3: tid...
新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、...
目次1. 縦方向のスライス1.1 垂直データベース1.2 垂直テーブル分割2. 水平(横断)セグメン...
テキストオーバーフローを表示するにはどうすればいいですか? どのようなニーズがありますか?単一行です...
Vue3.0 がリリースされてからしばらく経ちましたが、勉強を始める必要があります。まず、達成したい...
目次1. React フックと純粋関数2. シンプルなmyUseState 3. myUseStat...
目次まず、双方向バインディングを実装するアイデアについて説明します。これらの機能を実装するための j...
目次1. dfコマンド2. duコマンド3. fsckファイルシステム修復コマンド4. ディスクステ...
React tsxは参照用にランダムな検証コードを生成します。具体的な内容は次のとおりです。最近、t...
序文WeChat アプレットを開発する際には、ユーザーの権限が必要なページを使用する必要があることが...
目次このシリーズの背景概要PostgreSQL データベースの準備ソースからインストール仮想環境の作...
ポートを使用して MySQL をインストールした後、しばらくすると /var の容量が不足しているこ...
最近VScodeのリモート開発機能をいじっています。Dockerのコンテナに接続できるほか、WSLに...
tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...