CSSのpadding-topプロパティとは？使い方と指定方法を解説
padding-topプロパティとは
CSSのpadding-topプロパティは、要素の上側のパディング（内側の余白）を指定するためのプロパティです。要素のコンテンツと境界線（border）の間にある上部のスペースを調整することで、レイアウトの見栄えや読みやすさを向上させることができます。
指定できる値は、pxやemなどの長さの単位、または親要素の幅に対する割合を示す%（パーセント）のいずれかです。
指定できる値の種類
- length（長さ）： px、pt、cm、emなどの単位で余白を固定値として指定します。なお、パディングには負の値を指定できません。
- %（パーセント）： 包含ブロック（親要素）の幅に対する割合で余白を指定します。レスポンシブデザインに便利です。
コード例
以下の例では、1つ目の段落に「10px」、2つ目の段落に「10%」の上パディングを指定し、赤い境界線で余白の変化がわかるようにしています。
<html>
<head>
</head>
<body>
<p style = "padding-top: 10px; border:1px solid red;">
上パディングを10pxに指定した段落です
</p>
<p style = "padding-top: 10%; border:1px solid red;">
上パディングを10%（パーセント）で指定した段落です
</p>
</body>
</html>
まとめ
padding-topプロパティを使えば、要素の上側だけに余白を簡単に追加できます。固定値のpxと可変的な%の使い分けを覚えておくと、さまざまな画面サイズに対応した柔軟なレイアウト設計が可能になります。
-
CSSのpadding-topプロパティでアニメーションを実行する方法
CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します
-
CSSのpaddingプロパティ（省略形・ショートハンド）の使い方
CSSのpaddingプロパティは、padding-top（上）、padding-right（右）、padding-bottom（下）、padding-left（左）の4つの値をまとめて指定できる省略形（ショートハンド）プロパティです。1行で記述できるため、コードがすっきりし、可読性も向上します。 省略形の基本的な書き方 まずは基本となる例を見てみましょう。 padding: 10px 5px 7px 10px; この場合、各辺のパディングは次のように適用されます。 上（top）のパディング：10px 右（right）のパディング：5px 下（bottom）のパディング：7px 左（left）