「padding」プロパティは「margin」プロパティとともにどちらもボックスの余白を調整するためのプロパティですがどちらを使うかで結果が変わることがあります。ここではpaddingプロパティでできる余白の特徴についてよく理解しておきましょう。
このページの目次
ボーダーの内側に余白を設定するpaddingプロパティ
ボックスの内側でコンテンツ（内容）とボーダー（境界線）の間にある余白を調整するためのプロパティがpaddingプロパティです。
paddingプロパティは上下左右の4辺に同じ値の余白をまとめて指定します。
次の例は、padding-sampleクラスのついたp要素にのみpaddingに30ピクセルの余白を設定しています。余白の範囲がわかりやすいように背景色を設定しています。
<p>前の要素</p>
<p class="padding-box">paddingを指定した要素</p>
<p>後要の素</p>p {
background-color: #000000;
}
.padding-box {
background-color: #666666;
padding: 30px;
}この例からもわかるように、paddingプロパティによってできた余白は隣り合うボックスとの間にある余白ではなくボックスの内側の余白だということがわかります。
ボックスの内側にある余白ですので背景色が塗られています。padding プロパティは背景色や背景画像が影響する範囲に余白をつけたいときに使用するようにしましょう。
上下左右のpaddingを個別の値に指定するプロパティ
パディングは「padding-top」、「padding-bottom」、「padding-left」、「padding-right」プロパティがあり上下左右にそれぞれ個別の値の余白を指定することができます。
p {
background-color: #666666;
padding-top: 20px;
padding-right: 80px;
padding-bottom: 60px;
padding-left: 40px;
}paddingプロパティの値の指定にショートハンドプロパティを使う
上下左右のpaddingをそれぞれ個別の値に指定するプロパティがありますが、paddingプロパティでも４辺を別の値に指定することができます。１つ、２つ、３つ、４つと値の数を変えることで４辺をそれぞれ効率よく指定する方法がで、これをショートハンドプロパティといいます。
ショートハンドプロパティは、１～４つの値を半角スペースで区切って指定しますが、記述する値の数で適用される位置と順番が決まっています。
padding: 20px 80px 60px 40px; /* 上 右 下 左 */
/* 各辺を個別に指定しているのと同じ
padding-top: 20px
padding-right: 80px
padding-bottom: 60px
padding-left: 40px
*/marginプロパティでも同じ方法でショートハンドプロパティを書くことができます。
ボックスのサイズとbox-sizingプロパティ
paddingやborderプロパティを使用して余白や境界線の太さを設定すると、widthやheightの表示領域にpaddingとborderのサイズが加わります。そのため、paddingやborderの値によってボックス全体の大きさが変わってしまうことになります。これは、ボックスの挙動の規定値として設定されています。
paddingとborderのサイズがwidthやheightの表示領域に含めるか含めないかを「box-sizing」プロパティによって変えることができます。