CSS マージン merge_html/css_WEB-ITnose

マージンの結合は CSS における特別な概念です。 2 つのマージンが隣接している場合、それらは大きい方のマージンに結合されます。 隣接する要素の上マージンと下マージン、親要素と子要素の上マージンと下マージン、さらには同じ要素の上マージンと下マージンです。

隣接する要素

2 つの要素が上下に隣接している場合、上の要素の下マージンは下の要素の上マージンとマージされます。

要素が左右に隣接している場合はどうなるでしょうか?典型的なシナリオは、複数のインライン ブロック要素が並べて表示されることです。 ただし、インラインブロック要素のマージンは結合されず、独自の間隔が維持されます。

inline-block の上下のマージンはインライン要素であるため、依然として効果がありません。

親要素と子要素

親要素と子要素に上マージンがある場合、それらは大きい方の要素にマージされます。

もちろん、2 つのマージンは直接隣接している場合にのみマージされます。親要素にパディングまたはボーダーがある場合、それらはマージされません。

単一要素

要素にコンテンツ、パディング、境界線がない場合、その上下のマージンもマージされます。

さらに奇妙なのは、連続する隣接するマージンを結合できることです。 空の要素の上下のマージンがマージされるとき、その直後に別の要素のマージンが続く場合、それらは一緒にマージされます。

これが、連続する

が実際に占有するスペースが非常に少ない理由です。空の要素の上下のマージンと同様に、それらの上下のマージンがマージされます。このレイアウト動作は、このシナリオで非常に役立ちます。