余白のくぼみは、最初の子ノードの外側の余白が親ノードを元の位置から押し出すことを意味し、親ノードに背景色または画像がある場合、レイアウトに深刻な影響を与えます。
ソリューション 1
外側のマージンに内側のマージンを追加し、子ノードの外側のマージンを押し戻します
欠点は、余分な 1 ピクセルの高さがあることです。
ソリューション 2
親ノードに透明な境界線を追加する
デメリットは第一案と同じ高さの追加になりますが、第一案との違いは箱の内側でも外側でも高さを追加できる点です。
解決策 3
マージンを放棄し、相対位置を使用して位置を制御する
利点は余分な高さがないこと、
欠点は親ボックスの高さを拡張できないことです。親ボックスの高さが設定されていない場合、親ボックスの高さは小さなボックスの高さと同じです。
ソリューション 4
上に別の子ボックスを追加するには、カスタム テキスト コンテンツを設定し、font-size を 0 に設定します。
利点は、コンテンツがボックスを開くための余分な高さがないことです.
欠点は、フレックスレイアウトに追加のレイヤーが必要であることです.
ソリューション 5
スキーム 4 と同じですが、違いはノードを befort 疑似クラスに変更することです。
長所と短所は 4 番目のオプションと同じです。
まとめ: 問題を解決する方法はたくさんありますが、問題の原因を理解している限り、解決策を見つけることができます。
上記の解決策を言うより良い方法はありません。自分の好みや実際の状況に応じて使用してください。
他の解決策がある場合は、下のコメント欄にメッセージを残して共有してください。