今回は、marginの相殺が起きるパターンと起きないパターンについて紹介します。

当記事では実務で比較的に遭遇するmarginの相殺に絞って解説していきたいと思います。

そもそもmarginの相殺とは？

marginの相殺とは、ある状況でお互いの要素のmarginの数値を打ち消し合う現象です。

思ったようにmarginの数値が指定出来ていない場合は、marginの相殺を疑った方がいいです。

これから紹介するmarginの相殺が起きるパターンと起きないパターンを知っておけばmarginの相殺で毎回悩むことが無くなるでしょう。

marginの相殺が起きるパターン

基本marginの相殺は上下の余白で起きます。

隣接した兄弟要素の上下の余白

See the Pen
Untitled by webis (@webis-co)
on CodePen.

隣接した要素の上下の余白それぞれにmarginを指定すると、数値が相殺されます。

marginが相殺された時は大きい方のmarginの数値が適応されるので、今回はbox1の「margin-bottom: 50px;」が適応されています。

空の要素

See the Pen
Untitled by webis (@webis-co)
on CodePen.

空の要素の上下に対してmarginを指定すると相殺されます。

空のpタグに対して、「margin-top: 50px;」と「margin-bottom: 10px;」を指定しました。

今回も大きい方の50pxが適応されました。

marginの相殺が起きないパターン

続いては、marginの相殺が起きないパターンを見ていきましょう。

左右のmargin

See the Pen
Untitled by webis (@webis-co)
on CodePen.

左右のmarginは相殺されず、余白が合算されます。

今回は、box1の 「margin-right: 25px;」とbox2の「margin-left: 25px;」を合計した50pxがmarginの余白となります。

ネガティブmargin

See the Pen
Untitled by webis (@webis-co)
on CodePen.

ネガティブmarginは相殺されません。

box1に「margin-bottom: 25px;」、box2に「margin-top: -25px;」を指定しました。

相殺される場合は余白が25pxになるはずですが、今回はネガティブmarginなので「25px – 25px」で余白が0になります。

display: inline-block;を指定している

See the Pen
Untitled by webis (@webis-co)
on CodePen.

先ほど隣接した要素の上下の余白それぞれにmarginを指定すると数値が相殺されると紹介しました。

しかし、上下どちらかの要素に「display: inline-block;」を指定すると、marginは相殺されなくなります。

今回はbox1とbox2の余白を合わせて50pxとなります。

marginの使い方で注意すべき２つのこと

marginの使い方で注意すべき２つのことについて紹介します。

ここを意識するとmarginの相殺で悩む確率が減るでしょう。

①ページ全体でmarginを指定する方向をあらかじめ決めておくこと

コーディングする前にページ全体でmarginを指定する方向をあらかじめ決めておくことで、marginの相殺が起こりにくくなります。

僕の場合だと、上下の余白はmargin-bottom、左右はmargin-leftを指定するようにしています。

チーム開発するならチームのルールに従って、もし個人であれば自分がやり易いルールを作ると良いでしょう。

②paddingとmarginの使い分けを理解すること

本来paddingを入れるべき箇所にmarginを指定することで、marginの相殺が起きてしまうかもしれません。

そうならないためにも、paddingとmarginの使い分けをしっかり理解しておくことをおすすめします。

paddingとmarginの使い分けをサンプルを使って解説！の記事が分かりやすいので、是非参照してみてください。

まとめ

以上が、marginの相殺が起きるパターンと起きないパターンでした。

marginの相殺を理解することで狙った余白を指定することが出来るので、是非マスターしていきましょう。