padding-topプロパティの説明
CSSのpadding-topプロパティは、要素の上辺にあたる内側の余白を指定します。これは、CSSのボックス・モデルにおけるパディング・ボックス（Padding box）の寸法を定義するプロパティの一種です。
要素を配置すると、そこに四角形のボックスが生成されます。paddingは、その四辺全ての余白を制御しますが、padding-topは上方向の寸法のみを扱います。
パディングに負の値を指定しても無効となります。各辺に対応するプロパティは以下の通りです。
- 全てのパディング：
padding - 上辺のパディング：
padding-top - 右辺のパディング：
padding-right - 下辺のパディング：
padding-bottom - 左辺のパディング：
padding-left
padding-topに指定できる値
<length>- CSSで使用できる長さを表す単位つきの値です。ピクセル値やメートル法の単位などを使う絶対値、フォントサイズやビューポートなどを使用する相対値が指定できます。
<percentage>- パディングの寸法を包含ブロックの幅（
width）を基準に割合（%）で表します。
padding-topの使い方とサンプルコード
padding-topプロパティの構文は以下の通りです。
/* <length>値 */
padding-top: 10px;
padding-top: 1rem;
/* <percentage>値 */
padding-top: 5%;
padding-top: 10%;
/* グローバル値 */
padding-top: inherit;
padding-top: initial;
padding-top: revert;
padding-top: unset;
padding-topの実例
それでは実際にpadding-topプロパティの書き方を見ていきましょう。以下の例は、同じ装飾を施した要素に異なるパディングの値を指定した場合の比較です。コンテナの余白に応じて内容が押し込められている様子を確認できます。
要素の高さは制限しておらず、box-sizingの値はborder-boxです。
<section class="samp_box">
<div id="pad_1"><p>padding-top: 0;</p></div>
<div id="pad_2"><p>padding-top: 10px;</p></div>
<div id="pad_3"><p>padding-top: 2rem;</p></div>
<div id="pad_4"><p>padding-top: 10%;</p></div>
<div id="pad_5"><p>padding-top: 20%;</p></div>
<div id="pad_6"><p>padding-top: 30%;</p></div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background-color: #eee;
display: flex;
flex-wrap: wrap;
align-items: start;
gap: 1rem;
}
.samp_box > div {
width: 30%;
margin-top: 1rem;
background-color: #fff;
}
div > p {
margin: 0;
padding: 0;
background-color: #09f;
color: #fff;
}
#pad_1 {
padding-top: 0;
}
#pad_2 {
padding-top: 10px;
}
#pad_3 {
padding-top: 2rem;
}
#pad_4 {
padding-top: 10%;
}
#pad_5 {
padding-top: 20%;
}
#pad_6 {
padding-top: 30%;
}