概要

padding は、HTML要素の内側の余白を設定するCSSプロパティです。コンテンツとボーダー（枠線）との間のスペースを調整するために使用され、要素内の文字や画像に余裕を持たせたり、見た目のバランスを整える際に役立ちます。

基本的な使い方

See the Pen paddingについて by 西野, WEBデザイン (西野 誠) (@-WEB-the-vuer) on CodePen.

/* 単一方向の指定 */
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;

/* 4方向をまとめて指定 */
padding: 10px 15px 10px 15px;

/* 上下左右を同じ値に */
padding: 20px;

/* 上下と左右で分けて指定 */
padding: 10px 20px;

/* 上・左右・下の順で指定 */
padding: 10px 15px 5px;

padding は、内側のスペースを方向別に細かく調整したり、ショートハンドで一括指定したりできます。

出力される内容の例

<div style="padding: 20px;">
  このボックスには上下左右に20pxの内側余白があります。
</div>

役割とメリット（定義リスト形式）

内容の視認性向上

テキストや画像とボーダーの距離を確保し、読みやすさを向上させます。

レイアウト調整

コンテンツ内の余白を整えることで、要素同士のバランスが取りやすくなります。

装飾の一部として活用

ボタンやカード型UIのデザインにおいて、見た目の美しさを保つために不可欠です。

ユーザー体験の向上

クリックしやすいボタンや読みやすい見出しなど、UI/UXを改善します。

注意点

• 幅や高さに影響：box-sizing: content-box; の場合、padding は要素のサイズに加算されるため、レイアウトが崩れる原因になります。
• padding を設定すると、内部のテキストや画像が押し出されるため、他のスタイルとの兼ね合いに注意が必要です。
• margin と異なり、外部とのスペース調整には使えません。

まとめ

padding は要素の内側余白を調整するための基本的なプロパティで、読みやすく整ったレイアウト作成には欠かせません。 コンテンツと枠線の間に余裕を持たせることで視認性や操作性を高めるほか、ボタン・カード・セクションなどの要素デザインにも広く活用されます。