inset-inline

inset-inline は、位置を決めた要素（position が static 以外）を、文字が並ぶ向き（インライン方向）の始まりと終わりからどれだけ離すかをまとめて指定します。横書きでは left と right にあたります。

構文

<'top'>{1,2}

1234

プリセット

見本

項目

右下の角をドラッグするとサイズを変えられます

.box {
  display: flex;
  position: relative;
}

.box > :nth-child(2) {
  position: absolute;
  inset-inline: auto 16px;
}

inset-inline

両側を同じ値にする

inset-inline-startauto

inset-inline-end16px

1234

値を 1 つ書くと両側に、2 つ書くと始まり（inset-inline-start）と終わり（inset-inline-end）の順に効きます。
値は inset と同じで、長さ・%・auto と負の値です。% は基準の箱の、その向きの大きさ（横書きなら幅）に対する割合です。初期値は auto です。
片方だけ決めるとその端からの距離で置き、両方決めると、幅が auto ならその間いっぱいに広がります。このページの項目は幅が決まっているので、両方決めると始まりの値が勝ちます。

このページのプレビューは、補助の宣言で箱を position: relativeにして、2 番目の項目に position: absolute と inset-inline を書いています。左から右への横書きなので、始まりが左、終わりが右です。

閉じるボタンや吹き出しの印を inset-inline-end: 8px のように置くと、右から左に書く言語では自動で左側に移ります。