padding：要素の内側の余白を指定する
| 適用対象 | 全ての要素（テーブルの内部要素以外） |
| 継承 | しない |
paddingプロパティは、要素の内側に余白を設定する際に使用します。パディングにマイナス値を指定する事も出来ます。
特定の部分だけに余白を指定したい場合には、padding-top,padding-right,padding-bottom,padding-leftを使用します。
paddingに与えられる値
- padding: 値;
- [px]や[em]、[%]などの単位で上下左右全ての辺に対して余白を取る場合に使用します。
- padding: 値 値;
- 始めに記述した値を上下、半角スペースで区切って記述した値を左右の余白として取ります。
- padding: 値 値 値 値;
- 順に上、右、下、左の順に個別で余白の値を指定することができます。
paddingの使用サンプル
CSS
.box_sample01 {
border: 1px solid #666666;
padding: 5px;
margin: 0px auto;
}
.box_sample02 {
border: 1px solid #666666;
background-color:#3399FF;
padding: 5px 10px;
margin-bottom: 10px;
}
.box_sample03 {
border: 1px solid #666666;
background-color:#3399FF;
padding: 10px 20px 30px 40px;
}
.box_bg {
background-color: #99CCFF;
}
XHTML
<div class="box_sample01">
<div class="box_sample02">
<div class="box_bg">
box_sample02 [padding: 5px 10px;]<br />
paddingサンプル<br />
</div>
</div>
<div class="box_sample03">
<div class="box_bg">
box_sample03 [padding: 10px 20px 30px 40px;]<br />
paddingサンプル<br />
</div>
</div>
</div>
表示確認
box_sample02 [padding: 5px 10px;]
paddingサンプル
paddingサンプル
box_sample03 [padding: 10px 20px 30px 40px;]
paddingサンプル
paddingサンプル
paddingに関連するCSSプロパティ
| 余白の指定 | |
|---|---|
| margin | 要素の外側の余白（マージン）を指定する |
| margin-bottom | 要素の底辺に当たる外側の余白（マージン）を指定する |
| margin-left | 要素の左辺に当たる外側の余白（マージン）を指定する |
| margin-right | 要素の右辺に当たる外側の余白（マージン）を指定する |
| margin-top | 要素の上辺に当たる外側の余白（マージン）を指定する |
| padding | 要素の内側の余白を指定する |
| padding-bottom | 要素の内側の底辺側に当たる余白を指定する |
| padding-left | 要素の内側の左辺側に当たる余白を指定する |
| padding-right | 要素の内側の右辺側に当たる余白を指定する |
| padding-top | 要素の内側の上辺側に当たる余白を指定する |