入れ子の、親子同士や上下間のmarginの相殺

基本形

先ず入れ子にした要素を上下に配置します。親要素のborder・padding・heightはありません。

• 親要素＝parent＝薄い色
• 子要素＝child＝濃い色

現時点では各要素のmarginは0（ゼロ）としています。

背景のグリッドは灰色が25px、黒が50pxです。

<div id="boxA-parent">    //Ap
  <div id="boxA-child"">  //Ac
    <p>boxAp/Ac</p>
  </div>
</div>

<div id="boxB-parent">    //Bp
  <div id="boxB-child">   //Bc
    <p>boxBp/Bc</p>
  </div>
</div>

#boxA-parent	{
  background-color: pink;
  width: 150px;
  margin-bottom: 0;
}

#boxA-child	{
  background-color: red;
  width: 100px;
  height: 100px;
  margin-bottom: 0;
}

#boxB-parent	{
  background-color: lightblue;
  width: 150px;
  margin-top: 0;
}

#boxB-child	{
  background-color: blue;
  width: 100px;
  height: 100px;
  margin-top: 0;
}

上の要素だけに親子共にmargin

上の要素だけに、親子共それぞれにmarginを指定します。

図の矢印は、太い方が親要素、細い方が子要素のものです。

親要素のmargin大

#boxA-parent	{
  background-color: pink;
  width: 150px;
  margin-bottom: 100px;
}

#boxA-child	{
  background-color: red;
  width: 100px;
  height: 100px;
  margin-bottom: 50px;
}

子要素のmargin大

#boxA-parent	{
  background-color: pink;
  width: 150px;
  margin-bottom: 50px;
}

#boxA-child	{
  background-color: red;
  width: 100px;
  height: 100px;
  margin-bottom: 100px;
}

100 + 50 = 150px とはならずに親子どちらかの大きい方のみが適用されました。

下側要素（boxB）にかけた、上向きのmarginでも同様でした。

上下の親子全てにmargin

上下の親子全てにmarginを指定します。

#boxA-parent	{
  background-color: pink;
  width: 150px;
  margin-bottom: 100px;
}

#boxA-child	{
  background-color: red;
  width: 100px;
  height: 100px;
  margin-bottom: 50px;
}

#boxB-parent	{
  background-color: lightblue;
  width: 150px;
  margin-top: 25px;
}

#boxB-child	{
  background-color: blue;
  width: 100px;
  height: 100px;
  margin-top: 75px;
}

同様に各marginの値を変えてみるとこうなりました。

入れ子の、親子同士や上下間のmarginの相殺のまとめ

入れ子ではない場合と同様に

• 上下の要素間のmarginが相殺される
• 入れ子の子要素のmarginが親要素からはみ出る

となりました。いずれも全ての中で最も大きい値のみが適用されました。

ただしこれは親要素のborder・padding・heightいずれもない場合で、これらがあると違いが出てきます。それは別記事でご確認願います。

ちなみにpaddingの場合は相殺されません。