上下の要素間のmarginの相殺

公開：2015-08-14

更新：2025-09-26

CSSのmarginで上下要素間が相殺される様子を試し、そのソースコードと結果の図です。borderがある場合とない場合を試しています。

ページ内目次

基本形
borderがある場合
- 上要素の下margin と下要素の上margin が同じ場合
- 上要素の下margin と下要素の上margin が違う場合
borderがない場合
- 上要素の下margin と下要素の上margin が同じ場合
- 上要素の下margin と下要素の上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 に含ませるためです。

このCSSを色々変えてみます。

borderがある場合

上要素の下margin と下要素の上margin が同じ場合

#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 が違う場合

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

borderがない場合

上要素の下margin と下要素の上margin が同じ場合

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

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

上要素の下margin と下要素の上margin が違う場合

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

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