【CSS】paddingちょっとした調整で見栄え良く

今回は、CSSのpaddingプロパティについて、解説していきます。

divタグや、pタグなどの中に、テキスト（文字）を書いた時、その要素の内側に多少、余白があった方が、見映えがよかったりするものです。

paddingプロパティは、要素の内側の余白を指定するプロパティです。

cssでウェブサイトを見映えよくしようとした時、とても基本となるプロパティですし、頻繁に使うプロパティの一つだと思いますので、しっかりとマスターしておきたいところです。

まずは、順番にpadding-topプロパティ、padding-rightプロパティ、padding-bottomプロパティ、padding-leftプロパティを解説していき、最後にpaddingプロパティを解説していきます。

padding-topプロパティ
padding-rightプロパティ
padding-bottomプロパティ
padding-leftプロパティ
paddingプロパティ

padding-topプロパティ

.sample
{
	padding-top: 20px;
}

上のsampleセレクタは、要素の内側、上側部分の余白を20pxにする書き方になります。

要素の内側、上側部分の余白のみ、指定する書き方になります。

padding-rightプロパティ

.sample
{
	padding-right: 20px;
}

上のsampleセレクタは、要素の内側、右側部分の余白を20pxにする書き方になります。

要素の内側、右側部分の余白のみ、指定する書き方になります。

padding-bottomプロパティ

.sample
{
	padding-bottom: 20px;
}

上のsampleセレクタは、要素の内側、下側部分の余白を20pxにする書き方になります。

要素の内側、下側部分の余白のみ、指定する書き方になります。

padding-leftプロパティ

.sample
{
	padding-left: 20px;
}

上のsampleセレクタは、要素の内側、左側部分の余白を20pxにする書き方になります。

要素の内側、左側部分の余白のみ、指定する書き方になります。

paddingプロパティ

padding-topプロパティ、padding-rightプロパティ、padding-bottomプロパティ、padding-leftプロパティは、個別に各側の余白のみを指定するプロパティでしたが、paddingプロパティでは、それを一度に指定することができます。

.sample
{
	padding: 20px 10px 50px 30px;
}

上のsampleセレクタは、要素内側の余白を上側を20px、右側を10px、下側を50px、左側を30pxに指定しています。

paddingプロパティの値を、「上側」、「右側」、「下側」、「左側」の順に指定することで全方向の余白を指定することができるのです。

上側から始まり、時計回りの順に指定していくと覚えれば、簡単ですね。

先ほどの例のsampleセレクタを、下のように書き換えることができます。

.sample
{
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 50px;
	padding-left: 30px;
}

また、paddingプロパティの値を一つだけ指定することで、全方向の余白を同じにすることができます。

.sample
{
	padding: 60px;
}

上のsampleセレクタは全方向の余白を60pxに指定しています。

さらに、paddingプロパティの値を二つ指定すると、「上下」、「左右」の組み合わせで余白を指定することができます。

.sample
{
	padding: 30px 50px;
}

上のsampleセレクタは上下の余白を30px、左右の余白を50pxとしています。

「上下」、「左右」の順番で指定しましょう。

padding-topプロパティ、padding-rightプロパティ、padding-bottomプロパティ、padding-leftプロパティは、上下左右全ての余白を指定する必要がない場合に使うようにして、上下左右全ての余白を指定する必要がある場合は、paddingプロパティを使うようにします。

見映えの良いレイアウト調整を思い通りにするため、paddingプロパティの書き方は、必ずマスターしておきたいものです。

レイアウト調整に関するCSSプロパティについて、下の記事もぜひ参考にしてみてください。