内部の余白を設定するpaddingについて解説

padding とは、内部の余白を設定するプロパティです。

下記の画像のようなイメージで border の内部の余白を設定します。

padding はまとめて指定したり、個別で指定したりなど様々な指定方法があるので確認していきましょう。

paddingをまとめて指定する

padding をまとめて指定する方法は主に下記の4つです。

padding の指定方法と表示は下記の通りです。

<div class="padding-01">全方向に同じpxを指定</div>

<div class="padding-02">全方向に個別でpxを指定</div>

<div class="padding-03">padding: 上下 左右; でpxを指定</div>

<div class="padding-04">padding: 上 左右 下; でpxを指定</div>

div {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 width: fit-content;
 height: auto;
}

.padding-01 {
 /* 全方向に同じpxを指定 */ 
 padding: 30px;
}

.padding-02 {
 /* 全方向に個別でpxを指定 */ 
 padding: 20px 30px 40px 50px;
}

.padding-03 {
 /* padding: 上下 左右; でpxを指定 */
 padding: 30px 50px;
}

.padding-04 {
 /* padding: 上 左右 下; でpxを指定 */
 padding: 20px 50px 30px;
}

今回は padding: 30px; を指定したので、全方向に30pxの padding が設定されました。

ぜひ、検証ツールで確認してみてください。

今回は padding: 20px 30px 40px 50px; を指定したので、上に20px、右に30px、下に40px、左に50pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

今回は padding: 30px 50px; を指定したので、上下は30px、左右は50pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

今回は padding: 20px 50px 30px; を指定したので、上は20px、左右は50px、下は30pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

指定した方向だけpaddingを指定する

padding を指定した方向だけに設定したい場合は下記の4つを使って指定します。

padding の指定方法と表示は下記の通りです。

<div class="padding-top">paddingを上だけ指定</div>

<div class="padding-right">paddingを右だけ指定</div>

<div class="padding-bottom">paddingを下だけ指定</div>

<div class="padding-left">paddingを左だけ指定</div>

div {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 width: fit-content;
 height: auto;
}

.padding-top {
　padding-top: 30px;
}

.padding-right {
　padding-right: 30px;
}

.padding-bottom {
　padding-bottom: 30px;
}

.padding-left {
　padding-left: 30px;
}

今回は padding-top: 30px; を指定したので、上に30pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

今回は padding-right: 30px; を指定したので、右に30pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

今回は padding-bottom: 30px; を指定したので、下に30pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

今回は padding-left: 30px; を指定したので、左に30pxの padding が設定されました。

こちらも検証ツールで確認してみてください。

この記事では padding について解説しました。

padding とは、内部の余白を設定するプロパティです。

padding はまとめて指定したり、個別で指定したりなど様々な指定方法があるので、状況に合わせて使い分けていきましょう。

最後までお読みいただきありがとうございます。