CSS padding
padding プロパティは、上下左右の padding を指定する際に使用します。
padding には負の値を指定することはできません。
また、%で指定することも出来ます。
padding の引数の与え方は、[上][右][下][左]の順に指定します。
上下左右を異なる padding 幅にしたい場合には、スペースで区切って上右下左の時計回りの順に4の値を指定します。
しかし、引数を必ずしも4つ与える必要がなく、下のようなことも出来ます。
| 値を1つ指定 | 指定した値が[上下左右]の padding |
| 値を2つ指定 | 記述した順に[上下][左右]の padding |
| 値を3つ指定 | 記述した順に[上][左右][下]の padding |
| 値を4つ指定 | 記述した順に[上][右][下][左]の padding |
この時計回りと、省略時の設定について覚えておくと便利です。
margin padding border
margin と padding と border には次の関係があります。
border の幅は別途 width に加算されるので覚えておかないと細かな調整が出来なくなります。
margin padding borderの関係
padding は Element（要素）からすぐにスペースを空けるように働きます。なので border の位置にも影響してきます。
また、要素に指定した background 色を広げます。
一方、marginは border の外からスペースを空ける働きをします。
これは、隣接する Element（要素）に対してどれだけ距離を取るかを指定しています。
スペースを取った場合の 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>
padding は margin に比べシンプルな仕様なので簡単に把握できると思います。
以上、「CSS padding」でした。