問題
ネストされた2つのボックスは、ボックスの外側に設けボックス内のマージン-Xが追加される場合には、余裕-Xのセットアップが失敗した箱の内部につながります。。。
ソリューション
図1に示すように、箱の外側に配置されたフレーム
図2に示すように、箱の外側に設けられているオーバーフロー：隠されました。
図3に示すように、擬似要素クラス
.clearfix：前 { 内容：「」。 ディスプレイ：テーブル。 }
サンプルコード
<！DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <METAのcharset = "UTF-8"> <タイトル>トップ崩壊マージン- </ TITLE> <スタイルタイプ= "テキスト/ CSS"> .clearfix：前 { 内容：「」 ; 表示：表 ; } / * 第三の溶液の崩壊、最初のフレームプラス第三の方法に対応する、最も一般的に使用される方法である* / .CON { 幅：により300ピクセル、 高さ：300ピクセル ; 背景色：ゴールド ; / *ボーダー：1ピクセル固体黒; / *崩壊解決するための第一の方法* / / * オーバーフロー：隠された; / *第二の溶液の崩壊* * / } ■は { 幅：200pxの、 高さ：100pxに、 バックグラウンド色：緑 ; マージントップ：100ピクセル ; } </スタイル> </ HEAD> <BODY> <DIV CLASS = "CONのclearfix"> <DIV CLASS = "ボックス"> </ div> </ div> </ボディ> </ HTML>
記事の抜粋：https://www.cnblogs.com/reyinever/p/10629982.html