# padding

> 要素の内側の余白を指定するプロパティです。コンテンツと境界線の間のスペースを調整し、クリック領域の拡大やデザインの余白調整に使用します。上下左右を個別に指定できます。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/padding/

## 構文

```css
padding: <length> | <percentage>
```

## Tailwindでは

- `p-4` → padding: 16px
- `px-4` → padding-inline: 16px
- `py-2` → padding-block: 8px
- `pt-2` → padding-top: 8px
- 一般形: `p-{n}（n×4px。p-4 = 16px）`
- 任意値: `p-[18px]`
- 補足: 論理プロパティ版は ps-{n}（padding-inline-start）/ pe-{n}（padding-inline-end）。

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 1+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 全方向に16pxの内側余白

```css
padding: 16px;
```

### 例2: 上下12px、左右24pxの内側余白

```css
padding: 12px 24px;
```

### 例3: 上8px、右16px、下12px、左20pxの内側余白

```css
padding: 8px 16px 12px 20px;
```

## TIPS

ボックスサイズに含まれるため、幅の計算に注意。box-sizing: border-boxが便利。

## AIがよく間違えるポイント

パーセンテージのpaddingは上下方向でも「親の幅」基準という直感に反する仕様があり、かつてはアスペクト比ハックに使われました。AIが古いpadding-topハックを出してきたら、現在はaspect-ratioプロパティが正解です。

## AIへの依頼文例

- このpadding-topによるアスペクト比ハックをaspect-ratioプロパティに置き換えて

## 関連プロパティ

- [margin](https://www.css-dictionary.com/property/margin.md)
- [box-sizing](https://www.css-dictionary.com/property/box-sizing.md)
- [padding-inline](https://www.css-dictionary.com/property/padding-inline.md)