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

Web Design Template Copy Space Concept

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

目次

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

1.マージンの相殺とは

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

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

▲目次へ戻る

 

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

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

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

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

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

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

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

colmun_image4010_01

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

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

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>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です