CSS margin
margin プロパティは、上下左右の margin を指定する際に使用します。
margin の引数の与え方は、[上][右][下][左]の順に指定します。
上下左右を異なる margin 幅にしたい場合には、スペースで区切って上右下左の時計回りの順に4の値を指定します。
しかし、引数を必ずしも4つ与える必要がなく、下のようなことも出来ます。
| 値を1つ指定 | 指定した値が[上下左右]のマージン |
| 値を2つ指定 | 記述した順に[上下][左右]のマージン |
| 値を3つ指定 | 記述した順に[上][左右][下]のマージン |
| 値を4つ指定 | 記述した順に[上][右][下][左]のマージン |
この時計回りと、省略時の設定について覚えておくと便利です。
この margin ですが、やたらと複雑でブラウザごとに挙動が違うこともあるため、非常に厄介です。
最近ではブラウザごとの挙動も落ち着いてきた感はあるものの重なりのマイナス指定で重なりのある時など、異なることがあります。
margin padding border
margin と padding と border には次の関係があります。
border の幅は別途 width に加算されるので覚えておかないと細かな調整が出来なくなります。
margin padding borderの関係
marginは border の外からスペースを空ける働きをします。
これは、隣接する Element（要素）に対してどれだけ距離を取るかを指定しています。
スペースを取った場合の background （背景色）は、親の背景色になります。
一方、padding は Element（要素）からすぐにスペースを空けるように働きます。なので border の位置にも影響してきます。
また、要素に指定した background 色を広げます。
下に少しでも理解を助けるために参考になるHTMLを貼っておきますので、メモ帳にでもコピーして、名前を test.html 等保存して動かして確認にして margin や padding, border の幅を変えていろいろ試してみてください。
<html>
<head>
<style>
input{
font-size: 10px;
background: #909000;
padding: 10px 20px 30px 40px;
border: solid 10px;
margin: 50px 40px 30px 20px;
}
</style>
</head>
<body>
<div style='background: #c0c0c0;'>
<input type="button" value='Button'></input>
<div>
</body>
</html>
margin の相殺
margin をわかり辛くしているのに相殺があります。
margin の相殺は上下 top と bottom の間で発生します。その際、margin は結合される（折り畳まれる (collapsed)）ことがあり、結合される margin のうち大きなほうのサイズを持った一つの margin になります。
ただ、すべてのケースで相殺が起こるかと言うと、そうではないです。
・floatしている要素は、相殺が起きません。
・absolute と fixed を指定された要素は相殺されません。
単純な相殺は、大きなほうのサイズを持った margin が採用されますのでわかりやすいと思います。
親子での相殺や親子親子での相殺になってくると、かなり面倒になりますね。複雑な CSS を書くなら意識して設計を行う必要があます。
相殺が起きないケースは、一般的に使用する機械が少ないので割愛しますが、このレベルで仕事をされるようなら仕様までしっかり把握する必要があります。
negative margin(ネガティブ・マージン)
negative margin とは、マイナス方向に margin を設定することを言います。
単純な例では、少しだけはみ出させたい場合に使われます。
でも、margin の数値をマイナス指定することによって、要素を移動させ配置することができるので、配置に使うこともあります。
negative margin は理解している人にはとても便利なのですが、margin を複雑にしている一因です。
興味があるようなら negative margin で検索してみてください。
以上、最初は戸惑う「CSS margin」でした。