シュウ

今回は【CSS】marginが効かない!marginの相殺とは
についての解説になります！

こんな方に読んでほしい

• CSSを学び始めた方へ
• marginの使い方について学びたい方へ
• 今回はmarginの相殺についての記事になります

marginとは、文章やコンテンツの余白を指定する際に使われます。
最初に、前回の記事を読んでいただき、marginの指定方法をマスターするのがオススメです。

marginに関する記事

【CSS】marginの指定方法を学び余白を作ろう！

基本的なmarginの指定方法についての記事になります。

要素のボックスモデルについて

ボックスモデルとは要素のもつ領域になります。

marginが効かない

要素Aに対して「margin-bottom: 50px」、要素Bに対して「margin-top: 20px」を指定した際に、
marginが効かないことはありませんでしたか？

marginには「marginの相殺」という現象があります。次の章で詳しく解説していきます。

marginの相殺とは

marginの相殺とは、要素が前後に並び、そのそれぞれにmarginが設定されているときに
おこる現象になります。
少し難しいと思うので、イラストをまじえて解説していきます。

上下に対してmarginを指定した場合

要素それぞれmarginを指定し、要素01は「bottom:50px」、要素02は「top:10px」を指定しています。
50px+10px=60pxになるはずですが、相殺によって、値が小さい方の数値が打ち消されます。

<div class="area">
	<p class="box-01">要素01</p>
	<p class="box-02">要素02</p>
</div>

.box-01 {
	/*--margin以外 省略--*/
	margin-bottom: 50px;
}
	
.box-02 {
	/*--margin以外 省略--*/
	margin-top: 10px;
}

上の図のように、値が大きい方の数値が適用されます。

ポイント！
値が大きい方の数値が適用されます。
値が小さい方の数値が打ち消されます。

親子要素に対してmarginを指定した場合

要素それぞれmarginを指定し、親要素は「bottom:10px」、子要素は「bottom:50px」を指定しています。
50px+10px=60pxになるはずですが、相殺によって、値が小さい方の数値が打ち消されます。

<div class="area">
	<p class="box-01">子要素</p>
</div>
<p class="box-02">要素</p>

.area {
	margin-bottom: 10px;
}
	
.box-01 {
	/*--margin以外 省略--*/
	margin-bottom: 50px;
}

先ほどと同様に、値が大きい方の数値が適用されます。
では、どのように対処すればよいのか、次の章で解説していきます。

margin相殺の対処方法について

親要素と子要素に余白をとりたい場合は、
paddingやborderを指定することにより
相殺を防ぐ事ができます。

padding(パディング)による対処法

対処法01:paddingを指定することにより、
子要素と隣接しないようにしています。
marginとの相殺を防ぐ事ができます。

<div class="area">
	<p class="box-01">子要素</p>
</div>
<p class="box-02">要素</p>

.area {
    /*--border以外 省略--*/
	margin-bottom: 10px;
	padding-bottom: 10px;
}

border(ボーダー)による対処法

対処法02:borderを指定することにより、
子要素と隣接しないようにしています。
marginとの相殺を防ぐ事ができます。

<div class="area">
	<p class="box-01">子要素</p>
</div>
<p class="box-02">要素</p>

.area {
    /*--border以外 省略--*/
	border: 4px solid #ffffff;
}

POINT！
毎回、要素に対して「top、bottom」を指定すると、このように相殺の現象がおこります。
なるべくmarginを「top、bottom」のどちらか一方につけるようにするのがオススメです。
例として基本「bottom」しか指定しない！などルールを決めるのもよいかとおもいます。

marginの相殺が起こらないケース

先ほどの解説では垂直方向には相殺が適用されるとのことでしたが、
水平方向でも相殺が適用されるのか解説していきます。

水平方向(左右)のmargin相殺について

相殺が起こらないケース01:水平方向(左右)のmarginは相殺が起きず、合算されます。

<div class="area">
	<p class="box-01">要素01</p>
	<p class="box-02">要素02</p>
</div>

.box-01 {
	/*--margin以外 省略--*/
	margin-right: 50px;
}
	
.box-02 {
	/*--margin以外 省略--*/
	margin-left: 10px;
}

ネガティブマージンによる相殺について

相殺が起こらないケース02:ネガティブマージンとは、marginの値に-(マイナス)を指定することです。
垂直方向の要素どちらか片方に-(マイナス)が指定した場合、相殺が適用されません。

要素それぞれmarginを指定し、要素は「bottom:50px」、要素は「top:-10px」を指定しています。
50px-10px=40pxになります。大きい値が適用されることはありません。

<div class="area">
	<p class="box-01">要素01</p>
	<p class="box-02">要素02</p>
</div>

.box-01 {
	/*--margin以外 省略--*/
	margin-bottom: 50px;
}
	
.box-02 {
	/*--margin以外 省略--*/
	margin-top: -10px;
}

ポイント！
1.水平方向(左右)のmargin相殺は適用されません
2.ネガティブマージンでは、要素どちらか片方にマイナスが指定した場合、相殺が適用されません

まとめ

今回はこれ以上になります。

この記事ではmarginの相殺について詳しく記事を書きました。

最新記事

• 

  【CSS】display flex指定方法のまとめを解説

  2024.03.07

• 

  【CSS】背景画像を複数設置について解説!

  2023.12.14

• 

  【CSS】疑似クラス、::afterと::beforeで斜めの背景を解説!!

  2023.06.22

• 

  【CSS】画像の透過について、mix-blend-modeを使ってみよう

  2023.06.01

関連記事

< 前の記事

【CSS】marginの指定方法を学び余白を作ろう！

次の記事 >

【CSS】marginが効かない？ ブロック要素とインライン要素とは