CSS

やさしい説明

padding-inline は、文字の流れる向きをもとにして、左右の内側のすき間（余白） をまとめて指定できるプロパティです。

ふつうの padding-left や padding-right だと「左」「右」を固定で決めますが、padding-inline は書く向き（横書き・縦書き・右から左など）に合わせて自動で判断してくれます。

だから、多言語サイトや縦書きデザインにも柔軟に対応できます。

使い方のイメージ

「文字が流れる方向の両側」に、同じだけの余白をつけたいときにこう書きます：

.box {
    padding-inline: 20px;
}

この場合、左と右の内側の余白が20pxになります。

上下は変えたくない場合に便利です。

もし左右（インラインの始まりと終わり）で値を変えたいなら、2つの値を空白で分けて書けます：

.box {
    padding-inline: 10px 30px;
}

最初の値

始まり側（inline-start）

２つ目の値

終わり側（inline-end）

ポイントまとめ

• padding-inline は 左右（インライン方向）の内側余白 をまとめて設定できる
• 書字方向（左→右、右→左、縦書き）に対応できる
• 値を１つ → 左右同じ
• 値を２つ → 始まりと終わりで別々

豆知識

似た名前の仲間に：

• padding-block（上下の余白）
• margin-inline（外側の左右余白）

などがあります。あわせて覚えておくとレイアウト調整が楽になります。