inset-block
inset-block は、位置を決めた要素（position が static 以外）を、行が進む向き（ブロック方向）の始まりと終わりからどれだけ離すかをまとめて指定します。横書きでは top と bottom にあたります。
構文
<'top'>{1,2}プレビュー
1234
プリセット
見本
右下の角をドラッグするとサイズを変えられます
コード
.box {
display: flex;
position: relative;
}
.box > :nth-child(2) {
position: absolute;
inset-inline-end: 16px;
inset-block: 16px 48px;
}コントロール
inset-block
両側を同じ値にする
inset-block-start16px
inset-block-end48px
1234
解説
値の書き方
- 値を 1 つ書くと両側に、2 つ書くと始まり（inset-block-start）と終わり（inset-block-end）の順に効きます。
- 値は inset と同じで、長さ・
%・autoと負の値です。% は基準の箱の、その向きの大きさ（横書きなら高さ）に対する割合です。初期値はautoです。 - 片方だけ決めるとその端からの距離で置き、両方決めると、高さが
autoならその間いっぱいに広がります。このページの初期状態では、項目が箱の上から 16px、下から 48px の間に伸びます。
このページのプレビューは、補助の宣言で箱を position: relativeにして、2 番目の項目に position: absolute と inset-block を書いています。項目は、補助の宣言の inset-inline-end: 16px で右端に寄せています。横書きなので、始まりが上、終わりが下です。
向きで変わること
writing-mode: vertical-rlの縦書きでは行が右から左へ進むので、始まりが右、終わりが左になります。vertical-lrでは始まりが左です。- どの辺になるかは、基準の箱ではなく、その要素自身の writing-mode で決まります。direction では変わりません。
よく使う場面
inset-block: 0 で、横に置いたサイドバーや区切り線を基準の箱の上下いっぱいに伸ばします。
気をつけること
positionがstaticの要素には効きません。- 横書きでは top・bottom と同じ辺を指します。同じ要素に両方書くと、後に書いたほうが効きます。
- 主要なブラウザすべてで使えます。