パディングの一括設定 【padding】
ブラウザで表示した時の見え方
ソースサンプル
【CSS】
.padding {
padding: 15px;
border: #000000 1px solid
}
【HTML】
<div class="padding">ボックスの内側に指定した数値の余白があります</div>
[
黒※説明中のタグ
紫※省略可能なタグ
赤※変更可能
緑※文章など
]
解説
- padding: 10px 5px 1px 20px(上、右、下、左) のように記述すれば、一辺ずつ別の数値を設定できます。
- padding: 10px 1px 5px(上、左右、下) という風に、設定するやり方もあります。
- padding: 10px 1px(上と下、右と左) という風に、上下・左右に分けて設定するやり方もあります。
| オプション |
| 実数値 | 数値で設定する | padding: 20px |
| % | 親ボックスの横幅に対する割合で設定する | padding: 10% |
| 値 | 機能 | 例 |
AICHAN WEB(Z)
>
HTML＆CSSサンプル集(S)
>
パディングの一括設定