marginの相殺は、marginの理解をややこしくしている理由の1つです。この記事では、marginの相殺が起こる3つのケースと例外を紹介します。
CSSで余白を作る方法!marginとpaddingについて解説!marginとpaddingの基礎については、上の記事で解説しています。
💡 コーディングの練習なら模写修行!
この記事の目次
marginの相殺とは?
marginの相殺とは、上の画像のように、ある状況下で2つの要素間のmarginが打ち消し合う仕様です。
- 思い通りに余白が入らない
- 意図しない余白ができた
これらのケースはもしかしたら、marginの相殺が原因かもしれません。marginの相殺は複雑ですが、起こるケースや例外を知っておくと良いです。
marginの相殺が起こる3つのケース
- 隣接する兄弟要素間のmargin
- 親要素と子要素に設定する同方向のmargin
- 空の要素に設定する上下のmargin
marginの相殺が起こる、上の3つのケースを紹介します。
隣接する兄弟要素間のmargin
<div class="box">box</div>
<div class="box02">box</div>
.box{
margin-bottom: 30px;
}
.box02{
margin-top: 10px;
}
隣接する兄弟要素間のmarginは相殺され、大きい方が採用されます。上の例では30px + 10px = 40pxにはならず、大きい方の30pxだけ余白が空きます。
親要素と子要素に設定する同方向のmargin
親要素と子要素に設定する同方向のmarginも相殺しますが、上方向のmarginか下方向のmarginかで挙動が異なります。
💡 上方向のmargin
<div class="parent">
<div class="child">box</div>
</div>
.parent{
margin-top: 10px;
}
.child{
margin-top: 30px;
}
大きい方が採用されます。
💡 下方向のmargin
<div class="parent">
<div class="child">box</div>
</div>
.parent{
margin-bottom: 10px;
}
.child{
margin-bottom: 30px;
}
親要素がhight: auto;
の場合、上方向の時と同じく、大きい方が採用されます。hight
の指定がない場合は、デフォルトでauto
です。
.parent{
hight: 200px;
margin-bottom: 10px;
}
.child{
margin-bottom: 30px;
}
親要素がhight: auto;
以外の場合、親要素のmargin-bottom
が採用されます。
空の要素に設定する上下のmargin
<div class="space"></div>
.space{
margin-top: 30px;
margin-bottom: 10px;
}
大きい方が採用されます。
空の要素の上下にある要素にmarginが設定されている場合、上の画像のようになります。
marginの相殺が起こらない例外パターン
例外的に、marginの相殺が起こらないケースを紹介します。
display: inline-block;の指定がある
<div class="box">box</div>
<div class="box02">box</div>
.box{
margin-bottom: 30px;
}
.box02{
margin-top: 10px;
display: inline-block;
}
片方、もしくは両方の要素のdisplay
にinline-block
/ inline-flex
/ inline-grid
の指定がある場合はmarginの相殺は起こりません。
display
にinline
が指定されている場合は、そもそもmargin自体入りません。
上の例は、『隣接する兄弟要素間のmargin』ですが、『親要素と子要素に設定する同方向のmargin』と『空の要素に設定する上下のmargin』でも同じように、marginの相殺は起こりません。
親要素にborderやpaddingがある
<div class="parent">
<div class="child">box</div>
</div>
.parent{
margin-top: 10px;
border: 1px solid #333;
}
.child{
margin-top: 30px;
}
親要素と子要素の同方向にmarginがあっても、親要素にborderやpaddingの設定があると、marginの相殺は起こりません。上の例は上方向ですが、下方向も同じです。
flexアイテムやgridアイテム間
flexアイテムやgridアイテムのアイテム間は上下のmarginでも相殺は起こりません。
ネガティブmargin
<div class="box">box</div>
<div class="box02">box</div>
.box{
margin-bottom: 30px;
}
.box02{
margin-top: -10px;
}
ネガティブmarginが設定されている場合、合算された値が余白として入ります。上の例では、30px - 10px = 20pxの余白が入ります。
.box{
margin-bottom: -30px;
}
.box02{
margin-top: -10px;
}
このようにどちらにもネガティブmarginが設定されている場合、小さい方が採用されます。上の例では、-30pxです。
floatが指定されている
<div class="box-wrap">
<div class="box">box</div>
<div class="box02">box</div>
</div>
.box{
width: 100%;
margin-bottom: 30px;
float: left;
}
.box02{
width: 100%;
margin-top: 10px;
float: left;
}
floatが設定されている場合、marginの相殺は起こりません。
親要素にoverflowが指定されている
<div class="parent">
<div class="child">box</div>
</div>
.parent{
overflow: hidden;
margin-top: 10px;
}
.child{
margin-top: 30px;
}
親要素にoverflowが指定されている場合、overflowの値によってはmarginの相殺は起こりません。
よく使う値だと、hiddenとscrollが指定されている場合、marginの相殺は起こりません。overflowの初期値はvisibleです。
marginの相殺の回避方法はmarginを正しく使うこと!
- 余白を入れる方向を統一する
- marginとpaddingを正しく使い分ける
これらを意識するだけで、意図しないmarginの相殺が起きることは、ほぼなくなります。テクニックのような回避方法を覚える必要はないと、個人的に思っています。
💡 余白を入れる方向を統一する
余白の方向は、例えば上下であれば必ず上に、左右であれば必ず左に入れる、と決めます。
<li class="menu-item">🍎 りんご</li>
...
<li class="menu-item">🍊 みかん</li>
.menu-item + .menu-item{
margin-top: 10px;
}
上と左に統一すると、隣接セレクタが使えるので便利です。上のコードは『🍎 りんご』の上の余白は入りません。
💡 marginとpaddingを正しく使い分ける
本来、paddingで入れるべき余白をmarginで入れると、意図しないmarginの相殺が起きるかもしれません。
paddingとmarginの使い分けをサンプルを使って解説!marginとpaddingの使い分けに関しては、上の記事で具体例を用いて紹介しています。
超実務向け!コーディングの練習が出来るサービス作りました 🎉
模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。
こんな方におすすめ!
- 実務のレベル感を知りたい
- プロの制作フローを学びたい
- 何を考えながらコードを書くのか知りたい
- 基礎学習中、もしくは終えたばかり
- CSS設計やSCSSを使った書き方を学びたい
模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。
他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。
コーディング教材の【模写修行】は他の教材と何が違うのか?嬉しい声もいただいています!
自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました!
TwitterでDMいただきました!🙇
classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです!解説記事もわかりやすい...!
Tweet
デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet
答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet