メモ
margin相殺
兄弟要素のマージンは数値が高い方が優先される
上下
これは40pxにはならず、兄弟要素bの数値の方がが大きいのでtop30pxが優先される。
<divclass="a">
margin-bottom: 10px;
</div><divclass="b">
margin-top: 30px;
</div><style>div{padding:5px;outline:1pxsolid;}.a{margin-bottom:10px;}.b{margin-top:30px;}</style>
左右
左右には相殺は適用されない。加算され40pxになる。
<divclass="a">
margin-right: 10px;
</div><divclass="b">
margin-left: 30px;
</div><style>div{display:inline-block;padding:5px;outline:1pxsolid;}.a{margin-right:10px;}.b{margin-left:30px;}</style>
親要素より大きい値を子要素につける
bに20pxつけているが、中のcの40pxが優先される。
この時aが40px以上なら勿論aが優先される。
<divclass="a">
margin-bottom: 0; bにはmargin-top: 20px;
</div><divclass="b"><divclass="c">
bに入れ子でmargin-top: 40px;
</div></div><style>div{outline:1pxsolid;}.a{margin-bottom:0;padding:5px;}.b{margin-top:20px;}.c{margin-top:40px;padding:5px;}</style>
bにborder・paddingがついている場合はこれが無効で、bから計算される。
