CSS inset 属性

定義と用法

inset 属性は、要素とその親要素間の距離を設定するために使用されます。

注意：この属性が有効になるためには、以下を指定する必要があります： position 属性。

inset 属性は以下の属性の短縮形です：

• top
• bottom
• left
• right

inset 属性の値は、異なる方法で設定できます：

inset属性に4つの値がある場合：

inset: 15px 30px 60px 90px;

• 上の距離は15ピクセルです
• 右の距離は30ピクセルです
• 下の距離は60ピクセルです
• 左の距離は90ピクセルです

inset属性に3つの値がある場合：

inset: 15px 30px 60px;

• 上の距離は15ピクセルです
• 左右の距離は30ピクセルです
• 下の距離は60ピクセルです

inset属性に2つの値がある場合：

inset: 15px 30px;

• 上下の距離は15ピクセルです
• 左右の距離は30ピクセルです

inset属性に1つの値がある場合：

inset: 10px;

• 4つの方向の距離はすべて10ピクセルです

例

例1

配置の<div>要素と親要素の距離を設定します：

div {
  inset: 35px;
}

実際に試してみてください

例2

<div>要素の inset 属性値は、親要素から上方向および下方向に15ピクセル、左方向および右方向に30ピクセルの距離に設定されます：

div {
  inset: 15px 30px;
}

実際に試してみてください

例3

<div>要素の inset 属性値は、親要素から上方向に15ピクセル、左方向および右方向に30ピクセル、下方向に60ピクセルの距離に設定されます：

div {
  inset: 15px 30px 60px;
}

実際に試してみてください

例4

<div>要素の inset 属性値は、親要素から上方向に15ピクセル、右方向に30ピクセル、下方向に60ピクセル、左方向に90ピクセルの距離に設定されます：

div {
  inset: 15px 30px 60px 90px;
}

実際に試してみてください

CSS 文法

inset: auto|length|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

関連ページ

チュートリアル：CSS 定位

参照：CSS position 属性

参照：CSS bottom 属性

参照：CSS left 属性

参照：CSS right 属性

参照：CSS top 属性