この記事はマージン崩壊の問題とマージン崩壊を解決する方法を共有するものであり、一定の参考価値があり、皆様の学習に役立つことを願っています。
Margin は要素の外側のマージンを設定するものです。通常、マージンの値を設定するときは、親要素はブラウザを基準に配置され、子要素は親要素を基準に配置されます。マージンの値をどのように設定しても応答がないという状況がよく発生します。今日は、この問題を解決する方法を紹介します。
htmlコード
<div class="box1"> <div class="box2"></div> </div>
cssコード
.box1{ width:200px; height:200px; background-color:rgb(16,128,214); } .box2{ width:100px; height:100px; background-color:rgb(128,227,248); }
レンダリング
マージン崩壊
マージン崩壊は、親がブラウザに対して相対的に配置されているが、子が親に対して相対的に配置されていない場合に発生します。親親子要素の垂直方向のマージン。これら 2 つの要素は結合され、最大の 値になります。## 問題を解決するマージン崩壊の方法
#本質は、ボックスの BFC (ブロック フォーマット コンテキスト ブロックレベルのフォーマット コンテキスト) をトリガーしてレンダリング ルールを変更することです。親要素の#メソッド 1
position:absolute;相対位置を設定追加することでマージン崩壊の問題を解決します。親要素への相対位置属性
メソッド 2display:inline-block;
メソッド 3
float:left および float:right
方法 4
overflow:hidden
#要約: 以上 この記事は以上です。お役に立てれば幸いです。
以上がマージン崩壊の問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。