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 は、要素を「段が並ぶ向き(ブロック方向)」にちょっと動かすためのショートハンド(まとめ指定)です。
普段の横書きなら「上下のズラし(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 が使えます。
start と end の両方に同じ値start endCSS
/* 1値:開始側・終端側を同じだけズラす */
.tag {
position: absolute;
inset-block: 12px; /* 横書きなら top:12px; bottom:12px; 相当 */
}
/* 2値:開始側・終端側を別々に */
.badge {
position: absolute;
inset-block: 8px 24px; /* start が 8px, end が 24px */
}
CSS
.header {
position: sticky;
inset-block: 0; /* 横書きなら top:0; と同じ意味 */
z-index: 10;
}
CSS
.vertical-card {
writing-mode: vertical-rl;
position: relative;
inset-block: 16px; /* 縦書きでは左右方向のオフセットに自動対応 */
}
top/bottom と inset-block-* を同じ要素に書くと、読み手が混乱します。論理プロパティに統一するのがおすすめです。position を忘れないstatic のままだとオフセットは効きません。まず relative などに。% が便利% は「オフセット対象軸の包含ブロックのサイズ」に対する割合になります。レスポンシブで調整しやすいです。inset-block-start などのロングハンドを書けば、その側だけ上書きできます(CSSの通常のカスケード順序)。insetinset-inlineinset-block多言語・縦書き対応を見据えて上下(または左右)オフセットを1セットで書きたいとき。
既存の top/bottom を論理プロパティへ移行したいとき。