インライン方向(横書きなら左右)のパディングをまとめて指定する論理プロパティです。padding-left/rightの1行版として便利なうえ、RTL言語や縦書きでも意図が保たれます。コンテナの左右余白の定番の書き方になりつつあります。
padding-inline: <length> [<length>].container {
padding-inline: 16px;
}左右パディング16pxを1行で指定
.prose {
padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}セーフエリアを考慮した左右余白(開始側・終了側を個別指定)
ブロック方向(上下)は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はpadding-left/rightとpadding-inlineを無差別に混在させたコードを書くことがあります。コードベースの方針(物理か論理か)を伝えて統一させると保守性が上がります。縦書き文脈での軸の向き(inlineが上下になる)はAIもよく間違えるポイントです。
サイト全体の左右余白の指定をpadding-inlineに統一してリファクタリングして
スマホのセーフエリア(ノッチ)を考慮した左右パディングをpadding-inlineとenv()で書いて
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。