Sets how far an element is offset from both inline-direction sides—matching the text flow (horizontal LTR/RTL or vertical)—with a single property.
inset-inline は、「文字が流れる向き」に合わせて、要素をインライン方向(横書きなら左右、縦書きなら上下)の両端からどれだけ離すかをまとめて指定するプロパティです。
つまり、書字方向に強いプロパティなので、LTR/RTL(左→右/右→左)や縦書きでも自然に効きます。
inset-inline は inset-inline-start と inset-inline-end のショートハンドです。
inset-inline: 1rem;)。start end の順(例:inset-inline: 1rem 2rem;)。値は length/percentage/auto を取ります(負の値も可)。
position: absolute|fixed|relative|sticky などの“位置指定された要素”で意味を持ちます(static では基本無効)。“インライン方向”は書字方向で決まり、横書きでは左右、縦書きでは上下に相当します。
inset-inline: 0;inset-inline: 1rem auto;(start を 1rem、end は自動)CSS
.box {
position: absolute;
inset-inline: 0; /* 左右0(横書き時) */
margin-inline: auto; /* 自動マージンで中央寄せ */
width: 320px;
}
※縦書きでは「上下」がインライン方向になるため、同じ書き方で上下中央寄せになります。
HTML
<div class="wrap">
<div class="badge">Hello</div>
</div>
CSS
.wrap {
position: relative;
inline-size: 100%;
block-size: 200px;
background: #eee;
}
.badge {
position: absolute;
inset-inline: 1rem; /* インライン両端から 1rem */
inset-block: 0.5rem; /* ブロック方向(上下)両端から 0.5rem */
margin-inline: auto; /* 幅を決めれば中央寄せに使える */
inline-size: 160px;
background: #fff;
border: 1px solid #ccc;
padding: 0.5rem;
}
横書きなら左右 1rem の“余白を確保して中央付近に来る”挙動になります。
writing-mode を縦書きにすると、同じ CSS で「上下」側に効き方が切り替わります。
position: static のままだと効きません。まずは position を確認。inset-inline と inset-inline-start/end を併用した場合、CSS の通常ルール通り、後から書いた方が勝ちます。left/right/top/bottom)と混ぜると、どれが効くか分かりにくくなります。基本は論理プロパティで統一しましょう。left/right を書き、最後に inset-inline で上書きする方法があります(下例)。CSS
.banner {
position: absolute;
left: 0; right: 0; /* 物理プロパティの後方互換 */
}
@supports (inset-inline: 0) {
.banner {
left: auto; right: auto; /* リセットして */
inset-inline: 0; /* 論理で統一 */
}
}
inset(= top right bottom left の論理版)inset-block(= inset-block-start/end)inset-inline-start/inset-inline-endleft/right(書字方向に追従しない)