inset

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2021.

* Some parts of this feature may have varying levels of support.

inset は CSS のプロパティで、 top, right, bottom, left に対応する一括指定です。これは margin の一括指定における複数値の場合と同じ構文です。

このインセットプロパティは、 inset を含め、位置指定されていない要素には効果がありません。

試してみましょう

inset: 1em;

inset: 5% 0;

inset: 2em 50px 20px;

inset: 10px 30% 20px 0;

inset: 0;

<section id="default-example"> <div class="example-container"> <div id="example-element">これは絶対位置指定されています。</div> <p> まるで地球の表面から水が引き始めたかのように、通りは泥だらけで、ホルボーン通りを象のようなトカゲのようによちよち歩く、体長 12 メートルほどのメガロサウルスに出会っても不思議ではないでしょう。 </p> </div> </section>

.example-container { border: 0.75em solid #ad1457; padding: 0.75em; text-align: left; position: relative; width: 100%; min-height: 200px; } #example-element { background-color: #07136c; border: 6px solid #ffa000; color: white; position: absolute; inset: 0; }

これは CSS 論理的プロパティと値の仕様書で定義されているものですが、論理的なオフセットを定義するものではありません。これは物理的なオフセットであり、要素の書字方向やテキストの向きには関係がありません。

構成要素のプロパティ

このプロパティは、以下の CSS プロパティの一括指定です。

構文

css

/* <length> 値 */ inset: 10px; /* すべての辺に適用される値 */ inset: 4px 8px; /* 上/下 左/右 */ inset: 5px 15px 10px; /* 上 左/右 下 */ inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */ inset: calc(anchor(50%) + 10px) anchor(self-start) auto auto; inset: anchor-size(block) calc(anchor(50%) + 10px) auto calc(anchor-size(width) / 4); /* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */ inset: 10% 5% 5% 5%; /* キーワード値 */ inset: auto; /* グローバル値 */ inset: inherit; inset: initial; inset: revert; inset: revert-layer; inset: unset;

値

inset プロパティは left プロパティと同じ値を取ります。

公式定義

初期値	一括指定の次の各プロパティとして `top`: `auto` `bottom`: `auto` `left`: `auto` `right`: `auto`
適用対象	位置指定要素
継承	なし
パーセント値	relative to the containing block's size in the corresponding axis (e.g. width for left or right, height for top or bottom)
計算値	一括指定の次の各プロパティとして `top`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` `bottom`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` `left`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto` `right`: 長さで指定されると相当する絶対的な長さ、パーセント値として指定されると指定値、それ以外では `auto`
アニメーションの種類	length またはパーセント値, calc();

形式文法

inset = 
 <'top'>{1,4} 

<top> = 
 auto |
 <length-percentage> |
 <anchor()> |
 <anchor-size()> 

<length-percentage> = 
 <length> |
 <percentage> 

<anchor()> = 
 anchor( <anchor-name>? &&
 <anchor-side> , <length-percentage>? ) 

<anchor-size()> = 
 anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? ) 

<anchor-name> = 
 <dashed-ident> 

<anchor-side> = 
 inside |
 outside |
 top |
 left |
 right |
 bottom |
 start |
 end |
 self-start |
 self-end |
 <percentage> |
 center 

<anchor-size> = 
 width |
 height |
 block |
 inline |
 self-block |
 self-inline

例

要素のオフセットの設定

HTML

html

<div> <span class="exampleText">テキストの例</span> </div>

CSS

css

div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampleText { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; }

結果

仕様書

Specification
CSS Logical Properties and Values Level 1 # propdef-inset
CSS Positioned Layout Module Level 3 # propdef-inset