上下の要素間のネガティブmarginの相殺

基本形

2つのBoxを縦に積み重ねます。

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

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

#boxA	{
  border: 10px solid pink;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: 0;
}

#boxB	{
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: 0;
}

box-sizing: border-box は、border幅を width や height に含ませるためです。

ネガティブmarginとは

ネガティブmarginとは、負（マイナス）の値を設定することです。

上の要素の下側marginをマイナス値

上の要素（boxA）のmargin-bottomをマイナス（負）値にしてみます。

#boxA	{
  border: 10px solid pink;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: -50px;
}

#boxB	{
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: 0;
}

通常marginは文字通り間を空けますが、マイナス値によって重なりました。

下の要素の上側marginをマイナス値

また、上の要素（boxA）のmargin-bottomを0に戻し、下の要素（boxB）のmargin-topをマイナス（負）値にしても同様の結果でした。

#boxA	{
  border: 10px solid pink;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: 0;
}

#boxB	{
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: -50px;;
}

ネガティブmarginを含めた、margin同士の相殺

次に、上下要素両方にmarginをつけます。

• 赤矢印：上の要素（boxA）の margin-bottom
• 青矢印：下の要素（boxB）の margin-top

＋と－

#boxA	{
  border: 10px solid pink;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: 100px;
}

#boxB	{
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: -50px;
}

共に－で違う値

#boxA	{
  border: 10px solid pink;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: -75px;
}

#boxB	{
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: -50px;
}

共に－で同じ値

#boxA	{
  border: 10px solid pink;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: -50px;
}

#boxB	{
  border: 10px solid lightblue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: -50px;
}

ネガティブmarginの相殺のまとめ

• ＋と－：足された値。その値が＋なら間は空き、－なら重なる。
• －と－：大きい値のみ適用。－なので重なる。

ネガティブmarginにすることで、上下の要素を近づけたり重ねたりできます。

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