CSS辞書

padding-inline

スペーシング・サイズ

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

構文

Syntax
padding-inline: <length> [<length>]

コード例

1

.container { padding-inline: 16px; }

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

2

.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()で書いて

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

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