inset

レイアウト・配置

top、right、bottom、leftを一括で指定できる短縮プロパティです。position: absoluteやfixedと組み合わせて使用します。

構文

Syntax
inset: <top> <right> <bottom> <left>

コード例

1

inset: 20px;
実行結果
inset: 20px
全方向から20pxの位置

全方向から20px

2

inset: 10px 30px;
実行結果
inset: 10px 30px
上下10px、左右30px

上下10px、左右30px

3

inset: auto 10px 10px auto;
実行結果
右下固定
inset: auto 10px 10px auto(右下)

右10px、下10px(左上は自動)

💡 TIPS

モーダルやオーバーレイを親要素いっぱいに広げたい時、inset: 0;が便利。コードが短くなり読みやすい。

⚠️ よくある間違い

position: static(デフォルト)では効果がない。position: absolute、fixed、relative、stickyと組み合わせて使う。

関連プロパティ

ブラウザサポート

Chrome 87+, Firefox 66+, Safari 14.1+