CSS

Sets how far an element sits from the block-end side of the text flow (the bottom in horizontal writing), letting you pin buttons or badges neatly to the edge.

inset-block-end

まず一言で

inset-block-end は、ページの「段落が進む向き」の終わり側(横書きなら“下側”)から、要素までの距離を決めるプロパティです。ざっくり言うと、bottom の“書字方向に強い版”。

いつ使う?

使い方のコツ

  1. まず要素に position を付ける(static以外)
  2. 横書きなら “下から◯px” のイメージ。縦書きなら“ブロック終端側”が左右に切り替わる
  3. 数値は px / rem / % / auto が使える(% はブロック軸サイズに対する割合)

ミニ実例(横書きサイトの右下ボタン)

HTML

<div class="wrap">
	<button class="fab">Help</button>
</div>

CSS

.wrap {
	position: relative;
	min-height: 240px;
}

.fab {
	position: absolute;
	inset-block-end: 12px;  /* 横書きなら「下から12px」 */
	inset-inline-end: 12px; /* 横書きなら「右から12px」 */
}

もう一歩だけ正確に

「ブロック軸」は段落が進む向き。横書き(writing-mode: horizontal-tb)なら上下方向、縦書きなら左右方向。

inset-block-end はその軸の「終端側」からのオフセット。横書きでは bottom と同じ意味。

効くのは positionrelative/absolute/fixed/sticky のとき。static だと無効。

inset-block-start と両方を固定すると、要素のサイズ(ブロック軸方向)が決まることがある。

まとめ指定は inset-blockstart end の順)、四辺まとめは inset