# inset-inline

> position指定した要素のインライン方向（横書きなら左右）のオフセットをまとめて指定する論理プロパティです。left/rightの論理版で、RTL言語ではミラーリングされるため国際化対応のUI配置に適しています。

- カテゴリ: レイアウト・配置
- URL: https://www.css-dictionary.com/property/inset-inline/
- MDN: https://developer.mozilla.org/ja/docs/Web/CSS/inset-inline

## 構文

```css
inset-inline: <length> | auto [<length> | auto]
```

## ブラウザ対応

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

## コード例

### 例1: 書字方向の「開始側」に張り付くドロワー（RTLでは自動で右側に）

```css
.drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: 280px;
}
```

### 例2: 終了側から8pxの位置にバッジを配置

```css
.badge {
  position: absolute;
  inset-inline: auto 8px;
  inset-block-start: 8px;
}
```

## TIPS

上下方向はinset-block、4方向一括はinsetです。start/endで書いておくとRTL対応が「自動で正しくなる」のが最大の利点。ドロワーやトースト通知など方向依存のUIで効果を発揮します。

## よくある間違い

inset系は position: static では効きません（left/topと同じ）。またinset-inline: 0は左右両方0の意味で、左だけに張り付けたい場合はinset-inline-start: 0とinset-inline-end: autoです。

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

AIは絶対配置でtop/left/right/bottomを使いがちで、論理版のinset-inline/inset-blockの存在を出してこないことが多いです。RTL対応が要件にあるなら明示的に論理プロパティを指定させてください。inset: 0とinset-inline: 0の違い（前者は4方向）もAIが混同しやすい点です。

## AIへの依頼文例

- このモーダル・ドロワーの配置をtop/left/rightからinset系論理プロパティに書き換えて、RTLでも正しく動くようにして
- 画面端に固定するトースト通知を、inset-inline-endとinset-block-endで実装して

## 関連プロパティ

- [inset](https://www.css-dictionary.com/property/inset.md)
- [position](https://www.css-dictionary.com/property/position.md)
- [logical-properties](https://www.css-dictionary.com/property/logical-properties.md)
- [writing-mode](https://www.css-dictionary.com/property/writing-mode.md)