# padding-inline

> インライン方向（横書きなら左右）のパディングをまとめて指定する論理プロパティです。padding-left/rightの1行版として便利なうえ、RTL言語や縦書きでも意図が保たれます。コンテナの左右余白の定番の書き方になりつつあります。

- カテゴリ: スペーシング・サイズ
- URL: https://www.css-dictionary.com/property/padding-inline/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/padding-inline

## 構文

```css
padding-inline: <length> [<length>]
```

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 87+ / Firefox 66+ / Safari 14.1+ / Edge 87+

## コード例

### 例1: 左右パディング16pxを1行で指定

```css
.container {
  padding-inline: 16px;
}
```

### 例2: セーフエリアを考慮した左右余白（開始側・終了側を個別指定）

```css
.prose {
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
```

## TIPS

ブロック方向（上下）はpadding-block。inline/blockのペアで覚えると論理プロパティ全体が理解しやすくなります。個別指定はpadding-inline-start / padding-inline-end。

## よくある間違い

縦書き（writing-mode: vertical-rl）ではpadding-inlineは上下方向に効きます。「常に左右」を意図する装飾にはpadding-left/rightを使います。またpadding-inline: 16px 32pxの1つ目は「開始側」でありLTRなら左ですが、RTLでは右になります。

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

AIはpadding-left/rightとpadding-inlineを無差別に混在させたコードを書くことがあります。コードベースの方針（物理か論理か）を伝えて統一させると保守性が上がります。縦書き文脈での軸の向き（inlineが上下になる）はAIもよく間違えるポイントです。

## AIへの依頼文例

- サイト全体の左右余白の指定をpadding-inlineに統一してリファクタリングして
- スマホのセーフエリア（ノッチ）を考慮した左右パディングをpadding-inlineとenv()で書いて

## 関連プロパティ

- [padding](https://www.css-dictionary.com/property/padding.md)
- [margin-inline](https://www.css-dictionary.com/property/margin-inline.md)
- [logical-properties](https://www.css-dictionary.com/property/logical-properties.md)
- [writing-mode](https://www.css-dictionary.com/property/writing-mode.md)