初期値
相対設定の場合、ブラウザの拡大縮小で、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;
Tweet