paddingでボックスのパディングの幅を指定する【CSS】

padding系のプロパティはボックスの内側の余白（パディング）の幅を指定するプロパティです。

{padding-top: 幅;}
{padding-right: 幅;}
{padding-bottom: 幅;}
{padding-left: 幅;}

それぞれ上辺（top）、右辺（right）、下辺（bottom）、左辺（left）に対応しています。

値の指定方法

padding系のプロパティでは、auto・%値・単位付き数値などで指定します。

autoを指定すると、自動的に適切なパディングが適用されます。

また、%値で指定する値は、親要素のブロックに対する割合となります。

paddingプロパティは、ボックスの内側の余白（パディング）をまとめて指定するショートハンドプロパティです。

{padding: 上辺(top) 右辺(right) 下辺(bottom) 左辺(left);}

指定できる値はpadding系プロパティと同じです。

必ずしも4つの値を指定する必要はなく、指定する値の数によって、適用のされ方が異なります。

指定する値が1つの場合、すべての辺に同じ値が適用されます。

{margin: 上下左右辺;}

指定する値が2つの場合、1つ目の値が上下辺、2つ目の値が左右辺に適用されます。

{margin: 上下辺左右辺;}

指定する値が3つの場合、1つ目の値が上辺、2つ目の値が左右辺、3つ目の値が下辺に適用されます。

{margin: 上辺左右辺下辺;}

指定する値が4つの場合、上辺、右辺、下辺、左辺の順番に値が適用されます。

{margin: 上辺右辺下辺左辺;}

ちなみに外側の余白である「margin（マージン）」の指定もpadding（パディング）と同じように指定します。

関連記事
『marginでボックスのマージンの幅を指定する【CSS】』