マージンの相殺について

ブロックレベル要素の上下マージンに起こる「マージン相殺」現象について。

display: inline-block;
float

なお、上記などがかかってる場合では起きない。

<div class="box">
<div class="box">


.box {
 margin: 20px

上記の場合縦に並んだBOXの隙間は20px+20pxにはならず、20pxになる。　

<div class="box1">
<div class="box2">


.box1 {
 margin: 20px
 
.box2 {
 margin: 30px

上記のようにすると、大きい方のマージン要素が適用され、BOXの隙間は30pxとなる。

入れ子になったマージンの相殺

入れ子になった要素の上下マージンも相殺される。親となる要素のmargin-topと先頭の子要素のmargin-topは相殺され、子の要素のmargin-topは親要素の外側に突き抜けます。　　　　　　　　　　　　　　　　　　　　　　　この相殺は親要素のmargin-topが0の場合にも起こります。margin-bottomも同様。

<div class="parent">
  <div class="child"></div>
</div>
　

.parent {
 background-color: yellow;
 width: 200px;
 height: 100px;

.child {
 background-color: pink;
 width: 50%;
 height: 50px;
 margin-top: 20px ; /ここは反映されない
}

ただし、親要素と子要素のマージンを分けられるようなborderやpadding、インラインコンテンツが存在する場合には相殺されない。

.parent {
 border: 1px dashed black;

上記を親要素に入れてれば、子要素のmargin-topは働く。

解決策はいろいろありますが、

１親要素にpadding-topを指定する
２子要素にmargin-topを指定する
３親または子にインラインコンテンツを指定する
４親または子にinline-blockを指定する

などが挙げられる。

ただし子要素にmargin-topを設定する場合は、マージンの相殺によって子要素が親要素の上に突き出てしまい、レイアウトに謎の空白が現れることがある。その為、親要素と最初の子要素の間に余白を撮りたい場合には、親要素にpaddingを指定することで回避できる為、１.２を選択するのであれば１の一択になる。