# inset

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

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/inset/

## 構文

```css
inset: <top> <right> <bottom> <left>
```

## Tailwindでは

- `inset-0` → inset: 0
- `inset-x-0` → inset-inline: 0
- `top-0` → top: 0
- `-top-4` → top: -16px
- 一般形: `inset-{n} / top-{n} / bottom-{n}（n×4px）`
- 任意値: `inset-[10%]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 87+ / Firefox 66+ / Safari 14.1+ / Edge 87+

## コード例

### 例1: 全方向から20px

```css
inset: 20px;
```

### 例2: 上下10px、左右30px

```css
inset: 10px 30px;
```

### 例3: 右10px、下10px（左上は自動）

```css
inset: auto 10px 10px auto;
```

## TIPS

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

## よくある間違い

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

## AIがよく間違えるポイント

insetはtop/right/bottom/leftの一括指定で、値の順序もmarginと同じ時計回りです。inset: 0による全面配置（オーバーレイの定番）が最頻出ですが、position指定がないと何も起きない点はtop等と同じです。書字方向対応が必要ならinset-inline/inset-blockという論理版があります。

## AIへの依頼文例

- モーダルの背景オーバーレイをposition: fixed + inset: 0の定番パターンで実装して

## 関連プロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [inset-inline](https://www.css-dictionary.com/property/inset-inline.md)