内側余白（パディング）関連プロパティの値（CSS）
padding-top(right・bottom・left)
| 値（パラメータ） | 内容 |
|---|---|
| 任意の数値+px | 1px（ピクセル）は画面上の表示の最小単位 |
| 任意の数値+% | 親ボックスの幅に対する割合 |
| 入力例 | padding-top: 10px; |
サンプルコード（CSS別記）
/*CSSコード*/
.padding {
background-color: #fdf2f4;
width: 300px;
height: auto;
}
.padding-1 {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
background-color: #d6e3ff;
}
<!--HTMLコード-->
<div class="padding">横300px × 縦auto
<div class="padding-1">
パディングトップ20px<br>
パディングライト20px<br>
パディングボトム20px<br>
パディングレフト20pxに設定しています
</div>
</div>サンプルコード（CSS別記）の表示
横600px × 縦auto
パディングトップ20px
パディングライト20px
パディングボトム20px
パディングレフト20pxに設定しています
パディングライト20px
パディングボトム20px
パディングレフト20pxに設定しています
padding
| 値（パラメータ） | 内容 |
|---|---|
| 任意の数値+px | 1px（ピクセル）は画面上の表示の最小単位 |
| 任意の数値+% | 親ボックスの幅に対する割合 |
| 入力例 | padding: 10px 20px 30px 40px; |
| 値の設定例 | 10px;・・・「上右下左」を一括で設定 10px 20px;・・・「上下」と「右左」を設定 10px 20px 30px;・・・「上」と「右左」と「下」を設定 10px 20px 30px;・・・「上」と「右」と「下」と「左」を指定 |
サンプルコード（CSS別記）
/*CSSコード*/
.padding {
background-color: #fdf2f4;
width: 300px;
height: auto;
}
.padding-2 {
padding: 50px 10px 20px 50px;
background-color: #d6e3ff;
}
<!--HTMLコード-->
<div class="padding">横300px × 縦auto
<div class="padding-2">
パディングトップ50px<br>
パディングライト10px<br>
パディングボトム20px<br>
パディングレフト50pxに設定しています
</div>
</div>サンプルコード（CSS別記）の表示
横300px × 縦auto
パディングトップ50px
パディングライト10px
パディングボトム20px
パディングレフト50pxに設定しています
パディングライト10px
パディングボトム20px
パディングレフト50pxに設定しています