属性を使用する場合margin-top、設定された値が大きすぎると、親コンテナも下に移動する可能性があります。これは、垂直方向のマージン崩壊現象によって引き起こされます。
マージンの崩壊とは、2 つの隣接するボックスが垂直方向に重なり、それらのマージンが 1 つの大きなマージンに結合されることを意味します。子要素の設定margin-topを大きくすると、親要素の位置やレイアウトに影響し、親コンテナ全体が下に移動します。
このような事態を避けるには、次の点を考慮してください。
padding-top置換を使用してmargin-top親コンテナからの距離を実装します。- 親コンテナを
overflow: autoまたはに設定してoverflow: hidden、新しいブロック書式設定コンテキストを作成し、マージンが崩れるのを防ぎます。 - 親コンテナにゼロ以外の境界線を追加すると、マージンが崩れるのを防ぐこともできます。
つまり、 を設定するときはmargin-top、マージン崩壊の影響に注意し、親コンテナが一緒に移動しないように、特定のニーズに応じて適切なソリューションを選択する必要があります。