[CSS] paddingプロパティでボックスのパディング幅をまとめて指定しよう!

1.paddingとは?

paddingプロパティはボックスの内側の余白の幅をまとめて指定できます。

値の指定方法は以下の通りです。

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

値の指定方法

値は半角スペースで区切って4つまで指定できます。

それぞれ上辺、右辺、下辺、左辺に適用されます。

省略した場合、以下のような指定になります。

2.paddingの使い方

それではpaddingの使い方をみていきましょう。

以下のように指定することで上下辺に10px、左右辺に20pxが適用されます。

.box-example01 {
 padding: 10px 20px;
}

他にも値を設定できるのでいろいろと試してみることをお勧めします!