inset

Baseline Widely available

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

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

試してみましょう

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

構成要素のプロパティ

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

構文

css
/* <length> 値 */
inset: 10px; /* すべての辺に適用される値 */
inset: 4px 8px; /* 上/下 左/右 */
inset: 5px 15px 10px; /* 上 左/右 下 */
inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */

/* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */
inset: 10% 5% 5% 5%;

/* キーワード値 */
inset: auto;

/* グローバル値 */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

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

公式定義

初期値一括指定の次の各プロパティとして
適用対象位置指定要素
継承なし
パーセント値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

ブラウザーの互換性

BCD tables only load in the browser

関連情報