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

公開：2015-08-14

更新：2016-01-10

CSSのmarginで入れ子（ネスト）の子要素の上下marginが親からはみ出る様子を色々試し、そのソースコードと結果の図です。親要素にmargin・padding・height・floatの有無での違いです。

基本形

入れ子のmargin 基本形

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

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

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

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

<div class="boxA-parent">
<div class="boxA-child"">
  <p>boxAp/Ac</p>
</div>
</div>
<div class="boxB">
<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なし、floatなしです。

.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;
}

入れ子のmargin 上の親要素の下にborder

実際の様子

「borderあり」の実験

paddingあり

borderなし、上の親要素の下にpaddingあり、heightなし、floatなしです。

.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;
}

入れ子のmargin 上の親要素の下にpadding

実際の様子

「paddingあり」の実験

heightあり

borderなし、paddingなし、上の親要素にheightあり、floatなしです。

.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 上の親要素の下にheight

実際の様子

「heightあり」の実験

floatの場合

borderなし、paddingなし、heightなし、上下両親要素にfloatありです。

.boxA-parent	{
  background-color: pink;
  width: 150px;
  float: left;
}

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

.boxB	{
  background-color: lightblue;
  width: 150px;
  height: 100px;
  float: left;
}

入れ子のmargin 両親要素にfloat