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

Set of 9 vector templates for presentation slides. Abstract multicolored background of blurred nature landscapes, geometric vector, triangular style illustration

marginプロパティには、margin collapsing(マージンの相殺)というルールがあります。
マージンの相殺について、CSS【 margin 】4 ~ マージンの相殺 (margin collapsing)(1)で、マージンの相殺が起きる場合について紹介しましたが、今回は、マージンの相殺が起きない場合について紹介したいと思います。

目次

1.マージンの相殺が起きない場合
2.display:inline-block
3.display:flex
4.float
5.clear
6.overflow
7.position

1.マージンの相殺が起きない場合

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

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

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

この条件に照らし合わせると、マージンの相殺が起きるか起きないかの判別ができますが、マージンが相殺されない代表的な以下のケースについて考えてみたいと思います。

マージンが相殺されない主なケース

●display:inline-blockを指定した兄弟要素同士の場合
●display:flex の中のFlexアイテムな兄弟要素同士の場合
●float を指定した要素同士の場合
●clear を指定した要素同士の場合
●親要素がoverflow:visible以外のoverflowを指定した場合
●親要素がposition:absoluteまたはposition:fixedを指定した場合

▲目次へ戻る

 

2.display:inline-block

ブロックレベルの要素を横に並べる際に、display: inline-blockを指定すると便利ですが、display: inline-block を指定した兄弟要素同士では、マージンの相殺が起きません。

display:inline-block

display:inline-block

display:inline-block

display:inline-block

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #CCC; width:14em;}
div#sample p {
display:inline-block;
text-align:center;
width:5em;
background:#AAA;
margin:1em;}

(HTML)
<div id=”sample”>
<p>display:inline-block</p>
<p>display:inline-block</p>
<p>display:inline-block</p>
<p>display:inline-block</p>
</div>

上下に接したp要素のマージンの相殺が起こると1emとなりますが、マージンが相殺されずに2emとなっています。

▲目次へ戻る

 

3.display:flex

Flexboxを作るdisplay:flexを要素に指定すると、中の子要素は全てFlexアイテムと呼ばれ、兄弟要素同士のFlexアイテム間では、マージンの相殺は起きなくなります。

display:flex

display:flex

display:flex

display:flex

display:flex

display:flex

display:flex

display:flex

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #CCC;}
div#f1, div#f2 {
display:flex;
flex-wrap: wrap;
background:#AAA;
margin:1em;}
div#f1 p, div#f2 p {
flex:1 0 200px;
text-align:center;
line-height:3em;
background:#31A9EE;
margin:1em;}

(HTML)
<div id=”sample”>
<div id=”f1″>
<p>display:flex</p><p>display:flex</p><p>display:flex</p><p>display:flex</p>
</div>
<div id=”f2″>
<p>display:flex</p><p>display:flex</p><p>display:flex</p><p>display:flex</p>
</div>
</div>

Flexアイテム同士の上下のマージンが相殺されると1emですが、 相殺されずに2emになっています。
2つのFlexbox を縦に並べていますが、親要素同士は上下のマージンが相殺されています。

▲目次へ戻る

 

4.float

floatが指定されている兄弟要素同士では、マージンの相殺は起きません。
また、親要素にfloatが指定されている場合は、親子間でマージンの相殺は起きません。

float:left

float:left

float:left

float:left

  • List
  • List

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #CCC; width:14em;}
div#sample p, div#sample ul {
float:left;
text-align:center;
line-height:3em;
width:5em;
background:#AAA;
margin:1em;}
div#sample ul { width:12em;}
div#sample ul li {margin:1em; background:#31A9EE;list-style:none;}

(HTML)
<div id=”sample”>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<ul>
<li>List</li>
<li>List</li>
</ul>
</div>

p要素及びul要素に float:left を指定しています。
すると、縦に並んだ p要素同士ノマージン、p要素とul要素との間のマージンは、いずれも相殺されずに2emです。
また、ul要素は、子要素のli要素とのマージンの相殺が起きず、最初のli要素の上マージンも、最後のli要素の下マージンも1emです。

▲目次へ戻る

 

5.clear

上の例で、ul要素にfloat:noneと指定した部分をclear:leftと指定します。
clearプロパティを指定すると、マージンの相殺は起きなくなります。

clear

clear

  • clear:left
  • clear:left

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #CCC; width:14em;}
div#sample p, div#sample ul {
float:left;
text-align:center;
line-height:3em;
width:5em;
background:#AAA;
margin:1em;}
div#sample ul {
width:12em;
clear:left;
background:#AAA;}
div#sample ul li {margin:1em; background:#31A9EE; list-style:none;}

(HTML)
<div id=”sample”>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<p>float:left</p>
<ul>
<li>List</li>
<li>List</li>
</ul>
</div>

ul要素の上マージンは1emです。
p要素と ul要素との間は 2em になって、兄弟要素同士でマージンの相殺は起きていません。
clearプロパティを指定したul要素は、子要素liとのマージン相殺も起きていません。

▲目次へ戻る

 

6.overflow

親要素が、overflowプロパティでhidden、auto、scrollのいずれかを指定した場合(overflow:visible 以外を指定した場合)は、親要素と子要素との間で、マージンの相殺は起きません。
ちなみに、visible は overflowプロパティのデフォルト値です。

  • overflow:visible 以外(hidden、auto、scroll)
  • overflow:visible 以外(hidden、auto、scroll)

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #CCC; font-weight:bold; padding:0; margin:0;}
div#sample ul {
overflow:hidden;
padding:0;
margin:1em;
background:rgba(102, 153, 255, 0.5);}
div#sample ul li {
margin:1em;
padding:1em;
list-style:none;
background:rgba(102, 153, 255, 0.5);
border-radius:5px;
color:#FFF;
line-height:1em;}

(HTML)
<div id=”sample”>
<ul>
<li>overflow:visible 以外(hidden、auto、scroll)</li>
<li>overflow:visible 以外(hidden、auto、scroll)</li>
</ul>
</div>

親要素のul要素に、overflow: hiddenを指定しています。

▲目次へ戻る

 

7.position

親要素がposition:absolute または position:fixed の場合は、親要素と子要素との間でマージンの相殺は起きません。

  • position:absolute または position:fixed
  • position:absolute または position:fixed

 
ソースは次の通りです。

(CSS)
div#sample {border:solid 1px #CCC; font-weight:bold; padding:0; margin:0;
position:relative;
height:11em;}
div#sample ul {
position:absolute;
top:0;
left:0;
right:0;
padding:0;
margin:1em;
background:rgba(102, 153, 255, 0.5);}
div#sample ul li {
margin:1em;
padding:1em;
list-style:none;
background:rgba(102, 153, 255, 0.5);
border-radius:5px;
color:#FFF;
line-height:1em;}

(HTML)
<div id=”sample”>
<ul>
<li>position:absolute または position:fixed</li>
<li>position:absolute または position:fixed</li>
</ul>
</div>

ul要素に position: absolute を指定し、その親要素のdiv要素に対して、絶対位置にしました。
すると、ul要素と子要素のli要素との間で、マージンの相殺は起きていないのがわかります。

▲目次へ戻る

コメントを残す

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