概要
CSSプロパティ「padding-top」は、要素上部にパディング（余白）を指定することができます。このパディング領域についてですが、これは要素の内側上部に対して行われます。対して外側の上部に余白をつけたい場合は margin-top プロパティを利用します。
<div class="padding-top">
<p>色のついている部分が余白です。上部に指定した20pxの余白があります。</p>
</div>
<style>
* {
padding: 0;
margin: 0;
}
div {
background-color: #def;
border: 1px solid #000;
}
p {
background-color: #fff;
}
.padding-top {
padding-top: 20px;
}
</style>また四方のパディングを指定したい場合は padding プロパティを使用するとよいでしょう。
取りうる値
| 単位 | 説明 |
|---|---|
| px | pxとは画面の1画素（ピクセル）のサイズを１とする単位です。実際に表示されるサイズはモニターの解像度により変化します。 |
| em | 親要素を起点とする文字の高さを１とする単位です。１emは１文字分となります。 |
| % | 親要素の幅を基準に割合を％値で指定した単位です。 |
使用例
このプロパティを使用して、テキストの上に画像があるデザインを実装してみましょう。
<div>
<img src="https://www-creators.com/wp-content/uploads/2017/10/sample.jpg" alt="サンプル画像" width="160" height="120">
<p class="padding-top">このテキストの上に２０pxの余白を設けます</p>
</div>
<style>
* {
margin: 0;
padding: 0;
}
div {
text-align: center;
}
.padding-top {
padding-top: 20px;
}
</style>