CSS

A simple shorthand that nudges a positioned element along the block direction—up/down in horizontal text or right/left in vertical text—automatically matching the page’s writing mode.

inset-block

これなに？（やさしい説明）

inset-block は、要素を「段が並ぶ向き（ブロック方向）」にちょっと動かすためのショートハンド（まとめ指定）です。

普段の横書きなら「上下のズラし（top/bottom）」、縦書きなら「左右のズラし」に早変わりして、書字方向に自動で合わせてくれます。

少し正確に

inset-block は inset-block-start（開始側）と inset-block-end（終端側）をまとめて指定します。

横書き（writing-mode: horizontal-tb）では実質 top/bottom、縦書き（例：vertical-rl）では実質 right/left に相当します。

効くのは position が relative/absolute/fixed/sticky のときです（staticだと動きません）。

値は length/%/auto が使えます。

1値指定
start と end の両方に同じ値
2値指定
start end

基本の書きかた（最小限の例）

CSS

/* 1値：開始側・終端側を同じだけズラす */
.tag {
	position: absolute;
	inset-block: 12px; /* 横書きなら top:12px; bottom:12px; 相当 */
}

/* 2値：開始側・終端側を別々に */
.badge {
	position: absolute;
	inset-block: 8px 24px; /* start が 8px, end が 24px */
}

よく使うパターン

固定ヘッダーの「上から何px」の指定（sticky）

CSS

.header {
	position: sticky;
	inset-block: 0;      /* 横書きなら top:0; と同じ意味 */
	z-index: 10;
}

縦書きUIでの自然な配置

CSS

.vertical-card {
	writing-mode: vertical-rl;
	position: relative;
	inset-block: 16px;   /* 縦書きでは左右方向のオフセットに自動対応 */
}

実務のコツ（つまずき防止）

物理プロパティと混在させない
top/bottom と inset-block-* を同じ要素に書くと、読み手が混乱します。論理プロパティに統一するのがおすすめです。
position を忘れない
static のままだとオフセットは効きません。まず relative などに。
リキッドレイアウトでは % が便利
オフセットの % は「オフセット対象軸の包含ブロックのサイズ」に対する割合になります。レスポンシブで調整しやすいです。
ショートハンドの上書きルール
あとから inset-block-start などのロングハンドを書けば、その側だけ上書きできます（CSSの通常のカスケード順序）。

兄弟たちとの関係をサクッと把握

inset
ブロック軸＋インライン軸を両方まとめて指定（論理版の「上下左右まとめ」）。
inset-inline
行の流れる向き（インライン方向）だけを指定（横書きなら左右に相当）。
inset-block
いま読んでいるコレ。段の並ぶ向き（ブロック方向）だけ。

いつ使う？

多言語・縦書き対応を見据えて上下（または左右）オフセットを1セットで書きたいとき。

既存の top/bottom を論理プロパティへ移行したいとき。