CSS プロパティ padding-top

CSSプロパティpadding-top：要素内容に上部内余白を追加する

CSSプロパティ padding-top：要素内容に上部内余白を追加する

padding-top プロパティは、要素の内容とその上枠線との間のスペースのサイズ、つまり上部内余白を定義します。このプロパティは、ブロックレベル要素と置換要素にのみ適用され、インライン要素には効果がありません。

イントロダクション

padding-top プロパティは、要素の内容領域の上部に空白を追加するために使用されます。これは、padding プロパティのショートハンドプロパティの1つであり、他の3つの辺（右、下、左）の内余白も同時に設定することができます。

このプロパティは、ブロックレベル要素（例：div、p、h1）と置換要素（例：img、input）に適用されます。インライン要素（例：span、a）には効果がありません。


padding-top: length | percentage | inherit;


<div class="example">
  <p>これはテキストです。</p>
</div>


.example {
  width: 300px;
  border: 2px solid black;
  padding-top: 20px; /* 上部内余白を20pxに設定 */
}

次の画像は、padding-top を設定する前後の要素の内容領域の変化を示しています。矢印は、内余白の位置を示しています。

要素内容と枠線の間の距離を調整する: padding-top を使用すると、要素内容とその上枠線の間隔を簡単に制御し、内容が枠線に近すぎるのを防ぐことができます。
垂直方向の空白を作成する: 上部内余白を設定することにより、要素内に垂直方向の空白を作成し、コンテンツの可読性と視覚効果を向上させることができます。

padding: padding-top は、padding のショートハンドプロパティの1つであり、4つの方向すべての内余白を同時に設定することができます。
```
padding: 10px 20px 30px 40px; /* 上 右 下 左 */
    
```
margin-top: padding-top と margin-top の違いは、前者が内容と枠線の間の距離を制御するのに対し、後者は要素と隣接する要素との間の距離を制御することです。

padding-top プロパティは、優れたブラウザの互換性を備えており、ほぼすべての最新のブラウザでサポートされています。

padding-top プロパティは、要素の内容領域の上部に空白を追加するための簡単で効果的な方法です。このプロパティを使用すると、要素の外観と使いやすさを向上させることができます。

padding-top にパーセンテージを使用する場合、それは親要素の幅に対するパーセンテージです。

要素の周りの空白を追加する場合は margin-top を、要素の境界線と内容の間の空白を追加する場合は padding-top を使用します。

padding-top が機能しない場合は、次のことを確認してください。