`inset`は、要素の位置を指定する際に使用されるプロパティです。`inset`は、上下左右の四方向の位置を一度に指定することができ、`top`, `bottom`, `left`, `right`プロパティを組み合わせたものと考えることができます。また、`inset`は、絶対位置指定の`position`プロパティと共に使用することが一般的です。
## 例1: 要素を中央に配置する ~~~html-preview

~~~ この例では、`child`要素を中央に配置したいので、`container`要素には`position: relative;`を設定しています。そして、`child`要素には、`inset: 0;`を設定することで、`top`, `bottom`, `left`, `right`プロパティがそれぞれ0になり、親要素の中央に配置されます。
## 例2: ボックスを枠線の内側に配置するボックスを枠線の内側に配置するのに、`inset`を使用する方法を見てみましょう。 ~~~html-preview

~~~ この例では、`box`要素の内側に、`inner-box`要素を配置するために、`position`プロパティに`relative`を指定しています。そして、`inner-box`要素には、`inset: 10px;`を設定し、上下左右の余白を10ピクセルにしています。また、`width`と`height`プロパティには、`calc()`関数を使用して、`box`要素の幅と高さから余白を引いた値を指定しています。

クイズにチャレンジしよう！

関連チャレンジ