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の相殺に対する対策としては、marginとpaddingを理解し適切に使用する事でほとんど起こらないようになります。marginは外余白、paddingは内余白というのを理解し適切に使用しましょう。
適切に使用したとしても、marginの相殺が起こる場合があります。
そういった場合には、予め自身でmarginは極力上には使用せず下だけに使用するなどのルールを作っておく事で回避できる事が多いです。それでも起こる場合には都度対応していきましょう。
さいごに
いかがでしたでしょうか。
marginとpaddingを正しく理解・使用していけるように覚えておきましょう。
