構文
<'padding-top'>{1,2}プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
padding-inline: 16px 64px;
}コントロール
padding-inline
両側を同じ値にする
padding-inline-start16px
padding-inline-end64px
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
プレビューは左から右への横書きなので、始まりが左、終わりが右です。
値の書き方
- 値を 1 つ書くと両側に、2 つ書くと始まり（padding-inline-start）と終わり（padding-inline-end）の順に効きます。
- 書ける値は padding と同じで、長さと
%です。負の値とautoは書けません。% は親の箱のインライン方向の大きさ（横書きなら幅）に対する割合です。 - 初期値は 0 です。
向きで変わること
direction: rtlで右から左に書く言語では、始まりが右、終わりが左になります。writing-mode: vertical-rlなどの縦書きでは、始まりが上、終わりが下になります。- どの辺になるかは、親ではなくその要素自身の writing-mode と direction で決まります。
よく使う場面
- ボタンや入力欄の、文字の両脇の余白に使います。
- リストの字下げ（ブラウザの初期の CSS では ul や ol に
padding-inline-start: 40pxが付いています）を消したり変えたりするときに使います。
気をつけること
- 横書きでは padding-left・padding-right と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
- 主要なブラウザすべてで使えます。