Uniapp を使用してプロジェクトを実行しているときに、マージンのマージとマージンの崩壊の問題に遭遇したので、ここに記録し、解決策を共有します。
問題: 2 つのコンテナがネストされている場合、外側のコンテナと内側のコンテナの間に他の要素がない場合、内側の要素の margin-top が親要素に適用されます。
argin-top を使用すると、最初の要素は異常であり、ギャップはありませんが、親要素に適用されます (マージンの崩壊はマージンのマージとも呼ばれます)。次に示すように、2 番目と 3 番目の要素は正常です。
上記の状況では、マージンのマージとマージンの崩壊の問題が発生します。
解決策: この問題は、BFC (フルネームブロック フォーマット コンテキスト、ブロック レベルのフォーマット コンテキスト) をトリガーすることで解決できます。解決策は次のとおりです。
方法 1. 親に枠線を追加する
例: border:1px Solid #00FFFF;
方法 2. 親にパディングを追加する
例: パディング:1px;
方法 3: オーバーフローを使用して崩壊を解決します。
例: オーバーフロー: 非表示;
方法 4.親要素にposition:fixedを追加します。
位置決めの知識を利用して親要素を固定位置に表示し、マージン上部の折りたたみの問題の影響を受けないようにする。
方法 5. display: table を親要素に設定します。
方法 6. 疑似要素を使用する
.clearfix::before{
content: '';
display: table;
}折りたたみを解除する必要がある要素にclearfixクラス名を追加するだけです。
崩壊の理由:
親要素の最初の子要素の上部 margin-top が有効な境界線、パディング、または空でないコンテンツに遭遇できない場合、親要素の margin-top はレイヤーごとに単一の margin-top にマージされます。したがって、親要素に有効な境界線またはパディングを設定するか、子要素の前に空ではないコンテンツ (テキストなど) を追加する限り、親要素のマージンがマージされるのを防ぐことができます。
修正後は以下のように無事解決され、最初の要素間隔も正常に表示されるようになったことが分かります。
