ITコラム

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

ITコラム

2017.04.11

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

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

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

目次

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:18.5em;}
div#sample p {
	display:inline-block;
	text-align:center;
	width:7em;
	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; height:21em;}
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; height:16em;}
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要素との間で、マージンの相殺は起きていないのがわかります。

▲目次へ戻る

SHARE

最新記事

IMG_004

卒業生インタビュー

2019.08.20

【卒業生の声:渡邉さん】宮城の大学とプログラマカレッジへ通学を両立!限られた時間を有効活用し、希望するWEB系の会社へ内定。

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 某WEB系会社 プログラマカレッジ卒業生の渡邉さんにお話しをお伺いしました! 目次 新卒採用の切符を捨て、アイデアを形にできる仕事を目指す 質問が […]

続きを見る

DSC_3661

卒業生インタビュー

2019.08.16

【卒業生の声:前田さん】大学中退の未経験エンジニアが4社から内定獲得!初めての就活を成功させた秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 株式会社リヴァンプ プログラマカレッジ卒業生のマエダさん(23歳)にお話しをお伺いしました! 目次 勉強に興味が持てなくて大学中退 就職できるか不 […]

続きを見る

DSC_0077

卒業生インタビュー

2019.08.08

【卒業生の声:オチアイさん】高校教師からプログラマーへ転身!最初の2ヶ月は理解に苦しむ日々。楽しめるまでに至った秘訣とは?

受講スクール プログラマカレッジ 受講期間 3ヶ月間 料金 無料 就職先 プライムソリューションズ株式会社 プログラマカレッジ卒業生のオチアイさんにお話しをお伺いしました! 目次 大学院卒業後は高校教師に そこから思い切 […]

続きを見る

無料相談する

INTERNOUS,inc. All rights reserved.