親要素の子要素マージンの包含の不一致

マージンのある要素が別の要素内に配置されている場合、親要素がマージンを持たない可能性があります常にそのマージンを含めてください。この一貫性のない動作は、多くの開発者を困惑させてきました。

この現象を理解するには、マージンの縮小の概念を深く掘り下げる必要があります。 W3C 仕様では、折りたたみマージンを、2 つ以上のボックスの隣接するマージン (コンテンツ、パディング、境界線が介在しない) を組み合わせて 1 つのマージンを形成するものと定義しています。

マージンが配置された要素の場合別の要素内では、子要素の上下のマージンが親要素の上マージンを超えて折りたたまれる可能性があります。これにより、通常、親要素に子要素のマージンが含まれるようになります。

ただし、このデフォルトの動作をオーバーライドできる特定の条件があります。これらの条件には次のものが含まれます:

• 親要素に実線の境界線を適用する
• 子要素の位置を絶対位置に設定する
• 子要素にインラインブロック表示を与える
]
• 親要素の自動オーバーフローを有効にする

これらのオーバーライドの背後にある理由は、子要素のマージンが親要素のマージンを介して崩れるのを防ぐ境界の作成がすべて含まれるためです。

マージン縮小に関する W3C 仕様は混乱を招き、非論理的に見える場合があることに注意することが重要です。 「自由マージン」（親の上部または下部に接し、親に含まれないマージン）と「折りたたまれたマージン」（隣接するマージンの重なりが許可される）が混在しています。

「折りたたみ」というタイトルのサイトポイント記事Margins」では、元の質問で説明されている正確なシナリオを示す例を含め、この動作の詳細な説明が提供されています。これらの動作を理解することは、Web 開発で一貫性のある予測可能なレイアウトを作成するために非常に重要です。