column

ITコラム

Web Design Template Copy Space Concept

プログラミングノウハウ

2017.04.11

CSS【 margin 】4~マージンの相殺(margin collapsing)(1)

marginプロパティには、margin collapsing(マージンの相殺)というルールがあります。
今回は、このマージンの相殺について、相殺が起きる場合をまとめたいと思います。

marginプロパティについては、以下のページもご参照下さい。
CSS【 margin 】1~マージンとショートハンド
CSS【 margin 】2~autoとwidthと上下と左右
CSS【 margin 】3~ネガティブマージン
CSS【 margin 】4~マージンの相殺 (margin collapsing)(1)(本ページ)
CSS【 margin 】5~マージンの相殺 (margin collapsing)(2)

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3%で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. マージンの相殺とは

margin collapsing(マージンの相殺)とは、接している2つのマージンが結合して1つになることをいいます。
相殺されて1つになったマージンを collapsed marginといいます。

ブロックレベルの要素で、マージンが上下に接していると、結合して1つのマージンになります。
兄弟要素で、上下に接するマージンは大きい方が小さい方を吸収したり、親要素と子要素とのマージンでは、子のマージンが親の外に突き出したりもします。
そして、ある条件の下では、マージンの相殺が起こらないこともあります。

▲目次へ戻る

 

2. マージンの相殺が起きる場合

マージンの相殺が起きるには条件があります。

【マージンの相殺が起きる条件】

• ブロックレベルの要素であること
• margin と margin の間に何もないこと
• 上下のmargin同士が直接触れ合っていること

上の3つの条件全てに当てはまる場合に、マージンの相殺が起きます。

マージンの相殺が起きた場合は、幅の大きいmarginだけが残り、小さい方は吸収されます。
同じ幅の場合は、片方だけのマージン幅となります。

要素同士が兄弟関係の場合は、marginは一番外側なので、この条件に当てはまってマージンの相殺が起きます。
要素同士が親子関係の場合は、親要素にpadding や border がなければ、子のmarginと直接触れ合うため、マージンの相殺が起きます。

CSS margin マージンの相殺 margin collapsing プログラマカレッジ

上下に隣接する兄弟要素のマージンの相殺

同じ親要素を持つ兄弟関係の要素同士の場合、上下に隣接するマージンは相殺されます。
マージンの大きい方が残り、小さい方は吸収されます。

h4要素:上マージン1em、下マージン2em

p要素:上マージン1em、下マージン2em

p要素:上マージン1em、下マージン2em

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {border:solid 1px #CCC; margin:0; padding:0;}
div#sample h4, div#sample p {
	padding:1em;
	margin:1em 1em 2em;
	background:#31A9EE;
	line-height:2em;}
div#sample h4 {font-size:100%;}
div#sample p {background:#AAA;}

<!-- HTMLファイル -->
<div id="sample">
    <h4>h4要素:上マージン1em、下マージン2em</h4>
    <p>p要素:上マージン1em、下マージン2em</p>
    <p>p要素:上マージン1em、下マージン2em</p>
<div>

h4要素も p要素も、上のマージンは 1em、下のマージンは 2em ですが、1em + 2em で 3em が空くわけではなく、2em しか空いていません。
 

親要素のマージンと子要素のマージンの相殺

親要素に padding や border がない場合、親要素の上のマージンと最初の子の上のマージンが相殺されます。
同じように、親要素の下のマージンと最後の子の下マージンも相殺されます。

h4要素(最初の子要素)

p要素(最後の子要素)

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {border:solid 1px #CCC; margin:0; padding:0;}
div#sample section {margin:1em; padding:0;}
div#sample h4, div#sample p {
	padding:1em;
	margin:1em 0 2em;
	background:#31A9EE;
	line-height:2em;}
div#sample h4 {font-size:100%;}
div#sample p {background:#AAA;}

<!-- HTMLファイル -->
<div id="sample">
    <section>
        <h4>h4要素(最初の子要素)</h4>
        <p>p要素(最後の子要素)</p>
    </section>
</div>

親要素(section要素)の上マージンは 1em です。
最初の子要素(h4要素)の上マージンは 1em ですが、合計の 2em とはならず、相殺されて1em となります。
同じように、親の下マージンが 1em 、最後の子要素(p要素)の下マージンが 2em ですが、こちらも相殺されて、大きい方の 2em になっています。
 

空のブロックは 自分自身の上下のマージンが相殺される

高さ、中身、border、padding、の全てがない、ブロックレベルの要素は、自分自身の上下のマージンが相殺されます。

下の表示は、親のsection要素の最初と最後の子要素として、hr要素を入れています。
hr要素は、自分自身のマージンの相殺で、高さが相殺されたマージンだけの表示になり、さらにそれが、親のマージンや兄弟のマージンとも相殺を起こしています。


ここはh4要素で、上にhr要素があります

ここはp要素で、下にhr要素があります


 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {border:solid 1px #CCC; margin:0; padding:0;}
div#sample section {margin:1em; padding:0;}
div#sample hr {
	height:0;
	border:none;
	padding:0;
	margin:3em 0 2em;}
div#sample h4, div#sample p {
	padding:1em;
	margin:1em 0 2em;
	background:#31A9EE;
	line-height:2em;}
div#sample h4 {font-size:100%;}
div#sample p {background:#AAA;}

<!-- HTMLファイル -->
<div id="sample">
    <section>
        <hr>
        <h4>ここはh4要素で、上にhr要素があります</h4>
        <p>ここはp要素で、下にhr要素があります</p>
        <hr>
    </section>
</div>

1番上のマージンは、まず、hr要素の上下マージンが相殺されて3emだけになり、それが兄弟のh4要素のマージンとも相殺し、親のsection要素のマージンとも相殺して3emだけになってます。
真ん中のマージンは、兄弟同士のh4要素とp要素のマージンの相殺で2emです。
下のマージンも、hr要素自身の相殺後、兄弟要素(p要素)と親要素(section要素)のマージンの相殺が起こっています。
 

ネガティブマージンの相殺

ネガティブマージンがある場合も、マージンの相殺は起きます。

正のマージンと、負のマージンの場合は、引っ込む分とはみ出る分の差となります。
どちらも負のマージンの場合は、正のマージン同士と同様に、幅が大きい方が残ります。

次の表示は、親要素(ul要素)には、上マージン 2em、下マージン -1em を指定しています。
子要素(li要素)は、最初の子要素(li要素)に 上マージン -3em、下マージン 3em を、
最後の子要素(li要素)に 上マージン 3em、下マージン -3em を指定しています。

  • 最初の子要素
  • 最後の子要素

 
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {border:solid 1px #ccc; font-weight:bold; padding:0; margin:2em 0 5em;}
div#sample ul {padding:0;margin:2em 0 -1em;}
div#sample ul li {
	margin:-3em 1em 3em;
	padding:1em;
	list-style:none;
	background:rgba(102, 153, 255, 0.5);
	border-radius:5px;
	color:#FFF;
	line-height:1em;}
div#sample ul li:last-child {margin:3em 1em -3em;}

<!-- HTMLファイル -->
<div id="sample5">
    <ul>
        <li>最初の子要素</li>
        <li>最後の子要素</li>
    </ul>
</div>

▲目次へ戻る

無料説明会

SHARE

最新記事

無料説明会に参加してみる

INTERNOUS,inc. All rights reserved.

無料オンライン説明会へ