【CSS Modules】padding省略形プロパティの使い方

paddingプロパティは、HTML要素のコンテンツ領域と、その要素のボーダー（境界線）の間隔、すなわち内側の余白の量を保持するプロパティです。このプロパティを使用することで、要素のコンテンツがボーダーに密着しすぎることを防ぎ、視覚的に見やすく、整ったレイアウトを構築することができます。

paddingプロパティは、CSSのショートハンド（省略形）プロパティの一つであり、padding-top、padding-right、padding-bottom、padding-leftという個別のプロパティをまとめて設定することが可能です。値を一つだけ指定した場合（例: padding: 10px;）、その値が全ての四辺（上、右、下、左）に適用されます。二つの値を指定した場合（例: padding: 10px 20px;）、最初の値が上下に、二番目の値が左右に適用されます。三つの値を指定した場合（例: padding: 10px 20px 30px;）、最初の値が上に、二番目の値が左右に、三番目の値が下に適用されます。四つの値を指定した場合（例: padding: 10px 20px 30px 40px;）、上、右、下、左の順に時計回りにそれぞれの辺に適用されます。

このプロパティに指定できる値は、px、%、em、remなどの長さの単位で、負の値は許可されていません。paddingはCSSボックスモデルにおいて、要素のコンテンツ領域の外側、そしてボーダーの内側に位置する領域であり、背景色はpadding領域にも適用されます。ユーザーインターフェースのデザインにおいて、要素間の適切な間隔を保ち、情報伝達の明瞭さを向上させるために不可欠なプロパティです。

Copy
1padding: 10px 20px 30px 40px;

引数なし

引数はありません

戻り値なし

戻り値はありません