paddingプロパティ
paddingプロパティの概要
| 機能 |
要素のパディングを定義 |
| 指定可能な値 |
長さ, パーセント |
| 初期値 |
なし |
| 継承 |
しない |
| 適用可能なボックス |
全て |
paddingプロパティは、要素のパディング（詰め物的な余白）を定義します。marginプロパティの余白とは違い、ボーダーの内側の余白を定義します。また、余白部分は、そのまま要素の背景色が適用されます。
尚、paddingプロパティを指定しない場合は、パディングは取られません（「padding:0」ということになります。）。
example.css
h3 {
padding: 40px;
}
div {
padding: 30px;
border: 1px solid #000;
}
li {
border: 1px solid #000;
}
上下左右のパディングを個別で指定するために、次のようなプロパティも用意されています。
| プロパティ名 |
機能 |
| padding-top |
要素の上側のパディングの定義 |
| padding-right |
要素の右側のパディングの定義 |
| padding-bottom |
要素の下側のパディングの定義 |
| padding-left |
要素の左側のパディングの定義 |
padding-top、padding-right、padding-bottom、padding-leftプロパティの概要
| 機能 |
パディングを上下左右で個別に定義 |
| 指定可能な値 |
長さ, パーセント |
| 初期値 |
0 |
| 継承 |
しない |
| 適用可能なボックス |
全て |
example2.css
h2, h3, h4, h5 {
border: 1px solid #000;
}
h2 {
padding-top: 80px;
}
h3 {
padding-right: 80px;
}
h4 {
padding-bottom: 80px;
}
h5 {
padding-left: 80px;
}
padding
margin
ページの先頭
2024 Webデザインレッスン