フレックスボックスおよびグリッド レイアウトで最後のマージン/パディングが崩れて見えるのはなぜですか?

フレックスボックス/グリッド レイアウトでの最後のマージン / パディングの折りたたみ

フレックスボックスおよびグリッド レイアウトでは、要素の最後のマージンまたはパディング崩れて見える場合があり、意図しない間隔の問題が発生します。基礎となる原則を理解すると、この問題の解決に役立ちます。

マージン崩壊への対処

潜在的な問題 #1: オーバーフロー プロパティの誤解

• オーバーフローによるマージン崩れは発生しません
• オーバーフローは、CSS ボックス モデルに従って、コンテンツ ボックス内のコンテンツのみに影響し、パディングやマージンには影響しません。

潜在的な問題 #2: 標準ブロックでの崩壊レイアウト

• ブロックレイアウトでは、最後の余白が正しく表示されない場合があります。崩壊。
• これは、仕様にもかかわらず、オーバーフローがマージン/パディングに影響を与える可能性があることを示唆しています。

マージン崩壊の回避策

• 追加親コンテナの右にパディングして、必要な間隔を作成します。
• 「justify-content: space-between」プロパティを使用すると、コンテナ内で項目を均等に分散できるため、余白が不要になります。

回避策を含むサンプル コード

親でのパディングの使用コンテナ:

ul {
  padding-right: 30px;
}

'justify-content: space-between' の使用:

ul {
  justify-content: space-between;
}
ul li {
  margin: 0;
}

注: これらの回避策すべてのシナリオに適用できるわけではないため、特定のシナリオに基づいてテストと調整が必要になる場合があります。要件。

以上がフレックスボックスおよびグリッド レイアウトで最後のマージン/パディングが崩れて見えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。