上下の要素間のmarginの相殺

公開：2015-08-14

更新：2016-01-10

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

基本形

2つのBoxを縦に積み重ねます。背景のグリッドは灰色が25px、黒が50pxです。

上下要素間のmargin相殺

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

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

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

（見やすくするために上記以外に背景にグリッド状の画像を並べるなど多少の装飾をしています。）

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

borderがある場合

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

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

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

margin相殺上≠下

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

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

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

margin相殺上＝下

実際の様子

「borderがある場合」の実験

borderがない場合

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

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

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

margin相殺上≠下

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

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

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

margin相殺上＝下

実際の様子

「borderがない場合」の実験

floatの場合

.boxA	{
  border: 10px solid red;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-bottom: 50px;
  float: left;
}

.boxB	{
  border: 10px solid blue;
  box-sizing: border-box;
  width: 150px;
  height: 100px;
  margin-top: 25px;
  float: left;
}

margin相殺 float