CSS

Sets how far an element is offset from both inline-direction sides—matching the text flow (horizontal LTR/RTL or vertical)—with a single property.

inset-inline

やさしい説明

inset-inline は、「文字が流れる向き」に合わせて、要素をインライン方向（横書きなら左右、縦書きなら上下）の両端からどれだけ離すかをまとめて指定するプロパティです。

つまり、書字方向に強いプロパティなので、LTR/RTL（左→右／右→左）や縦書きでも自然に効きます。

正確な説明

inset-inline は inset-inline-start と inset-inline-end のショートハンドです。

1値指定
両方に同じ値を適用（例：inset-inline: 1rem;）。
2値指定
start end の順（例：inset-inline: 1rem 2rem;）。

値は length／percentage／auto を取ります（負の値も可）。

前提
position: absolute|fixed|relative|sticky などの“位置指定された要素”で意味を持ちます（static では基本無効）。

“インライン方向”は書字方向で決まり、横書きでは左右、縦書きでは上下に相当します。

使いどころ（よくあるパターン）

左右を同時にピタッと張り付けたい（横書き時）
inset-inline: 0;
片側だけオフセットしたい
inset-inline: 1rem auto;（start を 1rem、end は自動）
中央寄せ（横方向）を手早く
要素に幅を決め、インライン両端を 0、マージン自動で中央に

CSS

.box {
	position: absolute;
	inset-inline: 0;       /* 左右0（横書き時） */
	margin-inline: auto;   /* 自動マージンで中央寄せ */
	width: 320px;
}

※縦書きでは「上下」がインライン方向になるため、同じ書き方で上下中央寄せになります。

ミニサンプル

HTML

<div class="wrap">
	<div class="badge">Hello</div>
</div>

CSS

.wrap {
	position: relative;
	inline-size: 100%;
	block-size: 200px;
	background: #eee;
}

.badge {
	position: absolute;
	inset-inline: 1rem;   /* インライン両端から 1rem */
	inset-block: 0.5rem;  /* ブロック方向（上下）両端から 0.5rem */
	margin-inline: auto;  /* 幅を決めれば中央寄せに使える */
	inline-size: 160px;
	background: #fff;
	border: 1px solid #ccc;
	padding: 0.5rem;
}

横書きなら左右 1rem の“余白を確保して中央付近に来る”挙動になります。

writing-mode を縦書きにすると、同じ CSS で「上下」側に効き方が切り替わります。

よくあるつまずき（注意点）

CSS

.banner {
	position: absolute;
	left: 0; right: 0;        /* 物理プロパティの後方互換 */
}
@supports (inset-inline: 0) {
	.banner {
		left: auto; right: auto; /* リセットして */
		inset-inline: 0;         /* 論理で統一 */
	}
}

関連プロパティ（迷ったらこれを見る）

全方向まとめて
inset（= top right bottom left の論理版）
ブロック方向まとめて
inset-block（= inset-block-start/end）
片側だけ指定
inset-inline-start／inset-inline-end
物理プロパティ
left／right（書字方向に追従しない）