iPentec.com  /  Doc  /  CSS  /  CSS margin

目次

CSSのmarginプロパティを設定しても設定したサイズの余白が開かない - CSS margin プロパティの相殺 - CSS

CSSのmarginプロパティのマージン相殺の動作を紹介します。

概要

CSSでmarginプロパティに値を設定したにもかかわらず、設定した余白が開かない場合があります。
これは、CSSのマージンの相殺の仕様によるものです。この記事では、マージンの相殺の動作を確認します。

動作仕様

2つの枠が隣り合っている場合、両方の枠でマージンを設定している場合、マージンが相殺され、値の大きなマージンの間隔が2つの枠のマージン間隔として設定されます。

具体例1

コード

下記のHTMLファイルとCSSファイルを用意します。
MarginCollapsing01-1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="MarginCollapsing01-1.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
    <div class="MarginFrame2">下の枠です。</div>
  </div>
</body>
</html>
MarginCollapsing01-1.css
.BaseCanvas {
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
  margin-top: 60px;
  margin-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。MarginFrima1 では下部に40pixelのマージンを設定し、MarginFrame2では上部に40pixelのマージンを設定しています。上下の枠のマージンは外側の枠と上の間と同じだけの余白になっており、それぞれのマージンを足した80pixelのマージンがとられる動作にはならず、40pixelしか余白が開いていないことが確認できます。

片方のマージンのサイズを変更した場合

CSSファイルを編集し、MarginFrame1の下側のMarginを60Pixelに変更します。
MarginCollapsing01-2.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="MarginCollapsing01-2.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
    <div class="MarginFrame2">下の枠です。</div>
  </div>
</body>
</html>
MarginCollapsing01-2.css
.BaseCanvas {
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin-top: 40px;
  margin-bottom: 120px;
  margin-left: 12px;
  margin-right: 8px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
  margin-top: 60px;
  margin-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

表示結果

変更後、HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。上下の枠の余白が広くなっていることが確認できます。それぞれの枠のマージンのサイズが異なる場合でもそれぞれのマージンの値が足されたマージンが開くのではなく、大きいほうのマージンの値で余白が開くことが確認できます。

具体例2

コード

SimpleMargin03-1.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="SimpleMargin03-1.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
    <div class="MarginFrame2">下の枠です。</div>
</div>
</body>
</html>
SimpleMargin03-1.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin: 24px 32px 64px 32px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
  border: solid 1px #00852b;
  margin: 16px 32px 32px 32px;
}

表示結果

上記のHTMLをWebブラウザで表示すると下図の画面が表示されます。 上の黄色い枠(MarginFrame1)の下部のマージンは32ピクセルで設定しており、下の緑の枠(MarginFrame2)の上部のマージンは32ピクセルで設定しているため、 普通に考えると、黄色い枠と緑色の枠の間隔は64ピクセルになると期待できますが、実際には32ピクセルしか余白が開きません。


コード

CSSのコードを下記に変更します。緑の枠(MarginFrame2)の上部のマージンを32pxから48pxに変更します。
SimpleMargin03-2.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="SimpleMargin03-2.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
    <div class="MarginFrame2">下の枠です。</div>
</div>
</body>
</html>
SimpleMargin03-2.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin: 24px 32px 64px 32px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
  border: solid 1px #00852b;
  margin: 48px 32px 32px 32px;
}

表示結果

変更後HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。緑の枠(MarginFrame2)の上部のマージンを 48pxに広げても先の状態と変わらないことが分かります。マージンの相殺が起きた場合は隣り合うセルのマージンの大きい値のマージンになることが確認できます。


コード

CSSのコードを下記に変更します。緑の枠(MarginFrame2)の上部のマージンを120pxに指定します。
SimpleMargin03-3.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="SimpleMargin03-3.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
    <div class="MarginFrame2">下の枠です。</div>
</div>
</body>
</html>
SimpleMargin03-3.css
.BaseCanvas {
  margin: 32px 32px 0 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin: 24px 32px 64px 32px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
  border: solid 1px #00852b;
  margin: 120px 32px 32px 32px;
}
変更後HTMLファイルをWebブラウザで表示します。下図の画面が表示されます。緑の枠(MarginFrame2)の上部のマージンを広げたことで、黄色い枠(MarginFrame1)の下部のマージンよりも大きくなるため、MarginFrame2の上部マージンの値である120ピクセルがマージンの高さとして設定されます。

floatが指定されている場合の動作

floatが指定されている場合の動作を確認します。

コード

下記のコードを記述します。
MarginCollapsing02.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="MarginCollapsing02.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginFrame1">枠1</div>
    <div class="MarginFrame2">枠2</div>
    <div class="MarginFrame3">枠3</div>
    <div class="MarginFrame4">枠4</div>
  </div>
</body>
</html>
MarginCollapsing02.css
.BaseCanvas {
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}


.MarginFrame1 {
  width: 160px;
  float: left;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin-top: 32px;
  margin-bottom: 48px;
  margin-left: 24px;
  margin-right: 24px;
}

.MarginFrame2 {
  width: 160px;
  float: left;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin-top: 32px;
  margin-bottom: 48px;
  margin-left: 24px;
  margin-right: 24px;
}

.MarginFrame3 {
  width: 160px;
  float: left;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin-top: 32px;
  margin-bottom: 48px;
  margin-left: 24px;
  margin-right: 24px;
}

.MarginFrame4 {
  width: 160px;
  float: left;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  margin-top: 32px;
  margin-bottom: 48px;
  margin-left: 24px;
  margin-right: 24px;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
枠1と枠2の左右のマージンは外枠から枠1までの左マージン(24 pixel)より広く、枠1の右マージンと枠2の左マージンが足された48 pixelが枠1と枠2の間のマージンになっていることが確認できます。
また、枠1と枠4の縦方向の余白に関しても、外枠から枠1までの縦のマージン(32 pixel)より広くなっており、枠1と枠4の縦方向のマージンは枠1の下マージン48 pixelと枠4の上マージン32 pixelが足された80 pixelになっていることが分かります。
floatが設定されている場合は、マージンの相殺が起きずにそれぞれのマージンが加算された値のマージンが取られます。


対処法

paddingを利用する

marginを持つ2つの枠が隣接すると、マージンの相殺が発生するため、相殺されたくない部分はpaddingプロパティで記述する方法があります。
borderを表示している場合はborderの境界線の内側に余白ができるため、入れ子にする必要があります。
先の例の MarginCollapsing01-1.css を以下に変更した場合の表示を確認します。
.BaseCanvas {
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
  padding-top: 60px;
  padding-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

下図の表示になります。paddingでは枠の内部に余白ができるため、枠間の余白は無くなります。


枠間に余白があるように見せるために以下のコードに変更します。
MarginCollapsing01-1b.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" type="text/css" href="MarginCollapsing01-1b.css" />
</head>
<body>
  <div class="BaseCanvas">
    <div class="MarginOuterFrame1">
      <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
    </div>

    <div class="MarginOuterFrame2">
      <div class="MarginFrame2">下の枠です。</div>
    </div>
  </div>
</body>
</html>

MarginCollapsing01-1b.css
.BaseCanvas {
  margin-left: 32px;
  margin-right: 32px;
  margin-top: 32px;
  width: calc(100%-64px);
  height: 240px;
  background-color: #E0E0E0;
  border: solid 1px #202020;
}

.MarginOuterFrame1 {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

.MarginFrame1 {
  width: 80%;
  background-color: #fff2a9;
  border: solid 1px #ff6a00;
}

.MarginOuterFrame2 {
  padding-top: 60px;
  padding-bottom: 40px;
  margin-left: 12px;
  margin-right: 8px;
}

.MarginFrame2 {
  width: 80%;
  background-color: #9effb5;
}

解説

divタグを入れ子にし、外側の枠ではborderを設定せず、paddingとmarginを設定し、内側の枠でborderを設定しています。
  <div class="MarginOuterFrame1">
    <div class="MarginFrame1">marginプロパティは枠の外側の余白を設定するプロパティです。</div>
  </div>

表示結果


著者
とりっち
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

関連するページ

掲載日: 2017-10-05
改訂日: 2023-03-05
ドキュメント
新着記事一覧
タグ一覧
ドキュメント トップ
SNSコンテンツ
YouTube
Instagram
Pinterest
X
iPentec
プライバシー
iPentecについて
iPentec all rights reserverd.