入れ子で、親要素の条件により子要素のmarginが親要素からはみ出る

基本形＝親要素にborder等なし

先ず要素を入れ子にします。上の子要素（boxA-child）の下のmarginを50pxとします。

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

間隔を見るために下に別の要素boxBを配置します。

この時点では親要素のborder・padding・heightはいずれもない状態です。

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

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

<div id="boxB">           //B
  <p>boxB</p>
</div>

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

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

#boxB	{
  background-color: lightblue;
  width: 150px;
  height: 100px;
}

上図の通り子のmarginが親からはみ出て下の要素boxBとの間が空きます。

親要素にborderあり

上記基本形に、上の親要素の下側にborderを付加した場合です。padding、heightは無しです。

#boxA-parent	{
  background-color: pink;
  width: 150px;
  border-bottom: 25px solid red;
}

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

#boxB	{
  background-color: lightblue;
  width: 150px;
  height: 100px;
}

親要素にpaddingあり

上記基本形に、上の親要素の下側にpaddingを付加した場合です。border、heightは無しです。

#boxA-parent	{
  background-color: pink;
  width: 150px;
  padding-bottom:25px;
}

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

#boxB	{
  background-color: lightblue;
  width: 150px;
  height: 100px;
}

親要素にheightあり

上記基本形に、上の親要素にheightを付加した場合です。border、paddingは無しです。

#boxA-parent	{
  background-color: pink;
  width: 150px;
  height:125px;
}

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

#boxB	{
  background-color: lightblue;
  width: 150px;
  height: 100px;
}

入れ子の子要素のmarginと親要素の条件による影響のまとめ

入れ子の親要素によって、子要素の margin が、はみ出る場合とはみ出ない場合があることとなりました。上向きのmarginでも同様でした。

入れ子の子要素のmarginが親要素からはみ出る場合

最初の基本形のように、子要素のmargin方向に親要素のborderやpaddingがない場合です。

例えば、<div>で囲った最初に見出しの<h1>～<h6>タグを書く場合に注意です。特に指定しない場合は、見出しの上のmarginが<div>の上にはみ出てしまい、思わぬ間隔が空いてしまう場合があります。

<div>
  <h1>タイトル</h1>
</div>

入れ子の子要素のmarginが親要素からはみ出ない場合

• 子要素の margin 方向に、親要素の border がある。親要素に影響あり。
• 子要素の margin 方向に、親要素の padding がある。親要素に影響あり。
• 親要素に height を指定している。

はみ出たmarginが上下の要素のmarginと相殺する場合があります。それは別記事をご参考願います。