相殺される場合
<!DOCTYPE html><htmllang="ja"dir="ltr"><head><metacharset="utf-8"><title></title><linkrel="stylesheet"href="css/reset.css"><linkrel="stylesheet"href="css/style.css"></head><body><divclass="box"></div><divclass="box2"></div></body></html>.box{width:200px;height:200px;margin:20px;border:1pxsolidred;}.box2{width:200px;height:200px;margin:20px;border:1pxsolidblue;}
この場合boxの下marginとbox2の上marginが重なってしまっているため間隔は40pxとはならず20pxになる。
これが mrginの相殺である。
相殺されない場合
親要素と子要素のmarginを分けられるようなborder、paddingなどをが存在する場合には相殺されない。
<divclass="parent"><divclass="child"></div></div>.parent{background-color:red;width:200px;height:100px;border:1pxsolidblack;}.child{background-color:blue;width:50%;height:50%;margin-top:20px;}親要素にborderがあるので、子要素のmargin-topが効く。
