paddingプロパティは、上下左右のパディングをまとめて指定する際に使用します。
上下左右を異なるパディング幅にしたい場合には、スペースで区切って複数の値を指定します。
| 値を1つ指定した場合： | 指定した値が[上下左右]のパディングになります。 |
| 値を2つ指定した場合： | 記述した順に[上下][左右]のパディングになります。 |
| 値を3つ指定した場合： | 記述した順に[上][左右][下]のパディングになります。 |
| 値を4つ指定した場合： | 記述した順に[上][右][下][左]のパディングになります。 |
パディングはマージンとセットで覚えるのが良いと思います。
マージンは領域間のスペース、パディングは領域内のスペースです。
尚、パディングには負の値を指定することはできません。
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {background-color: #f8dce0; padding: 10px;}
p.sample2 {background-color: #f8dce0; margin: 30px; padding: 10px;}
p.sample3 {background-color: #f8dce0; padding: 10px 20px;}
p.sample4 {background-color: #f8dce0; padding: 10px 20px 30px;}
p.sample5 {background-color: #f8dce0; padding: 10px 20px 30px 40px;}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>
このサンプルでは上下左右にまとめて10pxのパディングを指定しています。パディングには負の値を指定することはできません。
</p>
<p class=”sample2″>
このサンプルでは上下左右にまとめて30pxのマージンと、10pxのパディングを指定しています。パディングには負の値を指定することはできません。
</p>
<p class=”sample3″>
このサンプルでは上下10px、左右20pxのパディングを指定しています。パディングには負の値を指定することはできません。
</p>
<p class=”sample4″>
このサンプルでは上10px、左右20px、下30pxのパディングを指定しています。パディングには負の値を指定することはできません。
</p>
<p class=”sample5″>
このサンプルでは上10px、右20px、下30px、左40pxのパディングを指定しています。パディングには負の値を指定することはできません。
</p>
</body>
</html>
ブラウザ上の表示
このサンプルでは上下左右にまとめて10pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上下左右にまとめて30pxのマージンと、10pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上下10px、左右20pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上10px、左右20px、下30pxのパディングを指定しています。パディングには負の値を指定することはできません。
このサンプルでは上10px、右20px、下30px、左40pxのパディングを指定しています。パディングには負の値を指定することはできません。
■関連項目
margin-top …… 上マージンを指定する
margin-bottom …… 下マージンを指定する
margin-left …… 左マージンを指定する
margin-right …… 右マージンを指定する
padding …… パディングに関する指定をまとめて行う
padding-top …… 上パディングを指定する
padding-bottom …… 下パディングを指定する
padding-left …… 左パディングを指定する
padding-right …… 右パディングを指定する