0

marginの相殺について…

marginの相殺について...

ある決まった条件において、隣接する要素同士の垂直方向のmarginが結合されてしまうことを「marginの相殺」と呼ばれています。どのような状況において相殺されてしまうのかを確認しておきましょう。

 

  • 通常配置されて垂直(上下)に隣接する要素同士
  • paddingやborderによって分離されることなく隣接する親要素と子要素

 

簡単に言ってしまえば、「基本的に上下のmarginが隣接する場合、それが親要素間でも、複数の要素間でもmarginが相殺される」ということです。

 

そして、適用されるmarginの値は次のようの計算されます。

  • 隣接するmarginが全て正の値(+)の場合は、最も大きい値が適用される
  • 隣接するmarginが正の値(+)と負の値(-)の場合は、両方の値を合算した値が適用される
  • 隣接するmarginが全て負の値(-)の場合は、0に近い値が適用される

 

 

▼ 例を見て確認していきましょう。

 

例1:box1(margin-bottom:100px) / box2(margin-top:50px)

 「box1」と「box2」というクラス名を付けた<div>要素を縦に配置しています。

 

このような記述の表示が下図になります。

 ex1

 

 例2: box3(margin-bottom:100px) / box4(margin-top:-50px)

  「box3」と「box4」というクラス名を付けた<div>要素を縦に配置しています。

 

 このような記述の表示が下図になります。

ex2

 

指定したmarginが反映されないときは、このような相殺がどこかで起こっている可能性が大きいので確認してみてください。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > marginの相殺について…