【CSS Modules】padding-topプロパティの使い方

padding-topプロパティは、CSSにおいて、HTML要素のコンテンツ領域と上部の境界線（border）との間に設けられる内側の余白、すなわちパディングの上部のみのサイズを保持するプロパティです。このプロパティを使用することで、ウェブページ上の要素のレイアウトや見た目を細かく調整することが可能になります。具体的には、ある要素の内部に表示されるテキストや画像などのコンテンツを、要素の上端からどれくらいの距離に配置するかを指定する際に用いられます。

設定できる値は、px（ピクセル）、em（親要素のフォントサイズに対する相対値）、rem（ルート要素のフォントサイズに対する相対値）などの絶対的または相対的な長さの単位、あるいはパーセンテージ（%）で指定します。パーセンテージを指定した場合、その値は要素の包含ブロックの幅に対する割合として計算されるため、縦方向のパディングを指定する際でも水平方向のサイズに依存することに注意が必要です。負の値を設定することはできません。

このプロパティは、paddingショートハンドプロパティの一部であり、padding-right、padding-bottom、padding-leftといった他のパディングプロパティと合わせて、要素の四方すべて、または特定の方向のパディングを制御します。Webページの構成要素間の視覚的な区切りを明確にしたり、要素内部のコンテンツが境界線に近すぎるのを防ぎ、読みやすさやデザインの一貫性を高めるために不可欠な要素です。要素のボックスモデルにおいて、パディングはコンテンツの外側に位置し、ボーダーの内側に配置されます。

Copy
1padding-top: 20px;

引数なし

引数はありません

戻り値なし

戻り値はありません