初心者向け！paddingで要素の内側に余白を作る方法

Webデザインでは、要素の内側に余白を作るために padding を使います。
特に「文字や画像を余白で囲む」「ボックスの内側を広くする」といった調整に便利です。
この記事では、基本のpaddingからショートカット指定まで、図解付きで解説します。

1 paddingの基本構造

paddingには4つの方向があります。

• padding-top： 上の内側余白
• padding-right： 右の内側余白
• padding-bottom： 下の内側余白
• padding-left： 左の内側余白

次の図のように、要素（青い四角）の内側にできる余白が padding です。

2 実際のHTML＋CSSサンプル

<div class="box">青いボックス</div>

<style>
.box {
  background-color: #3b82f6;
  color: #fff;
  width: 200px;
  text-align: center;
  padding: 20px; /* 内側の余白 */
}
</style>

3 ポイント解説

上の例では padding: 20px; によって、ボックスの内側の文字や内容が周囲から20px離れています。
上下左右それぞれ個別に設定することも可能です。

3.1 個別にpaddingを設定したい場合

<div class="custom-padding">カスタムボックス</div>

<style>
.custom-padding {
  background: #10b981;
  color: white;
  text-align: center;
  width: 200px;
  padding-top: 10px;   /* 上 */
  padding-right: 30px; /* 右 */
  padding-bottom: 15px;/* 下 */
  padding-left: 5px;   /* 左 */
}
</style>

4 ショートカットでまとめて指定

paddingもmargin同様、4方向をまとめて指定できます。順番は 上 → 右 → 下 → 左 です。

• padding: 10px; → 上下左右すべて10px
• padding: 10px 20px; → 上下10px、左右20px
• padding: 10px 15px 20px; → 上10px、左右15px、下20px
• padding: 5px 10px 15px 20px; → 上5px、右10px、下15px、左20px

<div class="shortcut-box">ショートカット例</div>

<style>
.shortcut-box {
  background: #8b5cf6;
  color: white;
  width: 200px;
  text-align: center;
  padding: 5px 10px 15px 20px; /* 上右下左 */
}
</style>

5 まとめ

・内側の余白を広げたい → padding-top/right/bottom/left
・上下左右まとめて設定 → padding: 上 右 下 左; ショートカット
・ブロックの内側を均等に広げたい → padding: 20px; など単一値も便利

ポイント：
paddingは要素の内側に余白を作るため、marginのように周囲のレイアウトに影響しにくいです。
デザインのバランスを整えるために、余白の調整に活用すると便利です。