`padding-inline` 左右の内側の余白をまとめて指定する

重要度4 / 5

意味

左右の内側の余白を、まとめて指定します。padding-left と padding-right が同じ値のときに置き換えます。上下は padding-block です。

ボタンやカードの内側で、左右だけ広めに取りたいときに使います。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<span class="button">左右の内側を広めに取る</span>

CSS

.button {
  display: inline-block;
  padding-block: 0.5rem;
  padding-inline: 1.25rem;
  background: #3b2f86;
  color: #fff;
}

プレビュー

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）