margin

初期値

相対設定の場合、ブラウザの拡大縮小で、marginも拡大縮小する。
H1タグやpタグには、marginが予め設定されている。
Chromeの場合のpのnarginの初期値は以下のものと予想される。
p {margin:1em 0px;}

単位はどれがいいか

px・em(=%)・rem。
いずれを使用すべきかは状況によると思う。
見やすくする目的で、文字の大きさに対して指定する場合はemがいいだろう。

ブラウザ指定の初期値のまま使用せず、明示的に初期設定していくことが望ましい。

marginの相殺

marginには重要な性質がある。
2つの要素が上下に並んでいて、その両方にmarginが一定数値とられていたとする。
この場合のmarginは相殺されて、値の大きいmarginのみが反映される。
これをmarginの相殺という。
marginの相殺にはいくつかのパターンも有るようだ。

相殺を回避するには

片方の要素に、marginを使用せずpaddingで代用するという手法が考えられる。

書き方

h1 {margin: 0;}

一括指定
margin: 上 右 下 左;
margin、border、padding、すべて順番は一緒。

一部だけ指定。
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;