marginの相殺についての理解と対策【CSS】

最終更新日:

公開日:2024-07-19

記事内に広告が含まれています。
marginの相殺についての理解と対策【CSS】

CSSで使用する機会の多いmarginですが、注意しなければいけないのがmarginの相殺です。
きちんと理解し、適切に使用する事でmarginの相殺を回避できますので覚えておいてください。

marginの相殺とは

marginの相殺とは2つの要素間でmarginの値を打ち消しあう状態の事を言います。
思った通りに余白が適応されない、変な余白が入ったなどの状態になった場合、marginの相殺が関係しているのかもしれません。marginの相殺は上下のmarginのみで左右のmarginには起こりません。

以下に一つ例を上げて解説していきます。

兄弟要素間でのmarginの相殺

隣り合う兄弟要素間でのmarginの相殺を例に解説していきます。
まずは以下の例をご覧ください。

<div class="blk1">
    ブロック1
</div>
<div class="blk2">
    ブロック2
</div>
.blk1 {
    margin-bottom: 50px;
}
.blk2 {
    margin-top: 30px;
}

このようなHTML・CSSの場合、ブロック1ブロック2の間の余白はいくつになると思いますか?
答えは「50px」です。これは2つの要素のmarginが相殺されていて大きい値が適応される為です。この他にもmarginが相殺されるケースがあります。一部ではありますが紹介いたします。

親要素と子要素間でのmarginの相殺

兄弟要素間だけではなく、親要素と子要素間でも相殺される場合があります。
相殺されるケースとしては、

  • 親要素のmargin-topと最初の子要素のmargin-top
  • 親要素のmargin-bottomと最後の子要素のmargin-bottom

親要素と子要素間では上記のような時に相殺される場合があります
ですが、親要素にpaddingが設定されている場合は相殺されません。

その他の相殺されるケース

その他に相殺されるケースとしては、空の要素に設定する上下のmarginがあります。

marginの相殺についての対策

marginの相殺に対する対策としては、marginpaddingを理解し適切に使用する事でほとんど起こらないようになります。marginは外余白、paddingは内余白というのを理解し適切に使用しましょう。

適切に使用したとしても、marginの相殺が起こる場合があります。
そういった場合には、予め自身でmarginは極力上には使用せず下だけに使用するなどのルールを作っておく事で回避できる事が多いです。それでも起こる場合には都度対応していきましょう。

さいごに

いかがでしたでしょうか。
marginpaddingを正しく理解・使用していけるように覚えておきましょう。

おすすめ記事

当ブログ運営者 ヒデ

北海道札幌市在住のフリーランスでWeb制作を行っているヒデです。Webコーディング(HTML・CSS・JSなど)やWordpressのカスタマイズ等のテクニック、困った時に確認できる分かりやすい解説を目標にして情報を発信していければと思っています。

当サイトに関するご意見・ご感想・ご要望または仕事のご依頼は以下のフォームよりお願い致します。

お問い合わせ お仕事のご依頼
PAGE TOP