SoyaBlog

これを見れば解決しそうや

HOME>CSS>内部の余白を設定するpaddingについて解説
ブログ投稿日時:
ブログ更新日時:
内部の余白を設定するpaddingについて解説

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

  1. paddingとは
  2. paddingの指定方法
  3. 今回のまとめ

1.paddingとは

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

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

paddingの例

2.paddingの指定方法

paddingはまとめて指定したり、個別で指定したりなど様々な指定方法があるので、これは実際にCSSの表示で確認してみましょう。

paddingをまとめて指定する

paddingをまとめて指定したいときはpaddingで指定しましょう。

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

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

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

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

<div class="padding-04">padding: 上 左右 下; で指定</div>
div {
 display: flex;
 justify-content: center;
 align-items: center;
 color: #fff;
 width: fit-content;
 height: auto;
}

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

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

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

.padding-04 {
 /* padding: 上 左右 下; で指定 */
 padding: 20px 50px 40px;
}
HTMLとCSSの表示
全方向に同じpxを指定

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

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

HTMLとCSSの表示
全方向に個別で指定

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

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

HTMLとCSSの表示
padding: 上下 左右; で指定

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

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

HTMLとCSSの表示
margin: 上 左右 下; で指定

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

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

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

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

・ padding-top (上だけに指定)

・ padding-right (右だけに指定)

・ padding-bottom (下だけに指定)

・ padding-left (左だけに指定)

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;
}
HTMLとCSSの表示
paddingを上だけ指定
HTMLとCSSの表示
paddingを右だけ指定
HTMLとCSSの表示
paddingを下だけ指定
HTMLとCSSの表示
paddingを左だけ指定

今回は「padding-方向」で指定した方向だけに30pxのpaddingが設定されました。

3.今回のまとめ

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

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

paddingはまとめて指定したり、個別で指定したりなど様々な指定方法があるので、忘れてしまった場合はこのブログを見にきてください。

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