CSS

It sets how far an element is moved from the side where blocks start, switching automatically with the writing direction—so in horizontal text it works like ‘distance from the top,’ and in vertical text it becomes the proper side, acting as a language-aware version of top.

inset-block-start

まずは一言で

inset-block-start は、要素を「段落が積み重なる向き（ブロック方向）」の“はじまり側”からどれだけ離すかを決めるプロパティです。

ふだん横書きのページなら「上からどれだけズラすか（= top の仲間）」だと思ってOKです。

もう少しだけ正確に

「ブロック方向のはじまり側（block-start）」は、書き方で変わります。

横書き（普通の日本語・英語のページ）
はじまり側は 上
縦書き（writing-mode: vertical-rl など）
はじまり側は 右（またはレイアウトに応じた側）

inset-block-start は position とセットで効きます。

position: absolute / fixed
親（包含ブロック）の「はじまり側」からの距離を決めます
position: relative
自分の元の位置から押し出す量を決めます（横書きなら下方向へズレます）
position: static（初期値）
効きません

「物理的な方向（top/right/bottom/left）」ではなく、言語や書字方向に合わせて自動で意味が合うのがポイントです。

使いどころ

最小サンプル（横書きページ想定）

HTML

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

CSS

.stage {
	position: relative;   /* 子の絶対配置の基準 */
	height: 160px;
	border: 1px solid #ccc;
}

.badge {
	position: absolute;
	inset-block-start: 12px;  /* 横書きなら「上から12px」と同じ意味 */
	inset-inline-start: 16px; /* 横書き・左から右なら「左から16px」に相当 */
}

よくあるつまずき

効かない
position が static のままになっていませんか？（relative / absolute / fixed で）
top と混在
論理プロパティ（inset-*）と物理プロパティ（top 等）の併用は競合のもと。どちらかに統一しましょう。
両端の同時指定（例：inset-block-start と inset-block-end を両方）
組み合わせ次第で高さが引き伸ばされることがあります（絶対配置でサイズが auto のときなど）。意図通りか確認を。
まとめショートハンド
inset-block（start と end のセット）や、全方向まとめの inset もあります。読みやすさ重視で使い分けを。