概要
CSSプロパティ「padding」は、要素の４辺全てにパディング（内部余白）を指定するショートハンドです。このパディングが指定する余白領域は、要素の内側に対してであり、要素の外側に余白をつけたい場合は margin プロパティを利用します。
<div class="padding">
<p>色のついている部分が余白です。指定した20pxの余白があります。</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: #def;
}
p {
background-color: #fff;
}
.padding {
padding: 20px;
}
</style>また要素の内側４辺というのは「上」、「下」、「左」、「右」を指し、まとめて記述することも、一つづつ指定することも可能です。値が１つの場合はその値が４辺全てに反映され、２つの値をいれると「上下」、「左右」に反映されます。更には、４つの値を入れた場合は「上」「右」「下」「左」と、時計回りの順序で指定が反映されます。
| 値 | 説明 |
|---|---|
| padding: 5px | 「上下左右」に5pxの余白を指定します。 |
| padding: 5px 10px | 「上下」に5px、 「左右」に10pxの余白を指定します。 |
| padding: 5px 10px 15px | 「上」に5px、 「左右」に10px、 「下」に15pxの余白を指定します。 |
| padding: 5px 10px 15px 20px | 「上」に5px、 「右」に10px、 「下」に15px、 「左」に20pxの余白を指定します。 |
4辺に異なる値をいれてみます。
<div class="padding">
<p>色のついている部分が余白です。4辺それぞれ異なる値を指定してます</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: #def;
}
p {
background-color: #fff;
}
.padding {
padding: 5px 10px 15px 20px;
}
</style>すなわち、このpaddingプロパティは padding-top、padding-right、padding-bottom、padding-left をまとめて指定しているということになります。このようなプロパティをショートハンドプロパティと言います。
取りうる値
値には整数と以下のような単位をつけることができます。
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
実用における注意点
padding プロパティには、負（マイナス）の値は入れることができません。もし入れたい場合は margin プロパティを使用します。
<div class="padding">
<p>色のついている部分が余白です。しかしマイナスの値、-20pxを指定してしまったので余白が反映されません</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: #def;
}
p {
background-color: #fff;
}
.padding {
padding: -20px;
}
</style>使用例
単位に｢%｣や｢em｣を指定した方法です。近年のブラウザサイズの多様化にあわせて、pxでの直指定ではなく、画面サイズや文字サイズを基準とした余白の指定方法もみられるようになってきました。
こちらの例は、余白をパーセントで指定しています。これによって様々なサイズの画面で見た時に、余白の割合も変化するので、デザインが損なわれることなく同じような見た目を保つことができます。
<div class="padding">
<p>余白を5%で指定してます。</p>
</div>
<style>
* {
padding: 0;
margin: 0
}
div {
background-color: #def;
box-sizing: border-box;
}
p {
background-color: #fff;
}
.padding {
padding: 5%;
}
</style>