inset-inline

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.

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

inset-inlineCSS のプロパティで、要素におけるインライン方向の先頭および末尾からの論理的な内部位置を定義し、要素の書字方向やテキストの向きに従って物理的な内部位置に対応付けられます。 topbottom、または rightleft のいずれかのプロパティに、 writing-mode, direction, text-orientation で定義された値に従って対応します。

試してみましょう

構成要素のプロパティ

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

構文

css
/* <length> 値 */
inset-inline: 3px 10px;
inset-inline: 2.4em 3em;
inset-inline: 10px; /* 値が先頭と末尾の両方に適用される */

/* 包含ブロックの幅または高さに対する <percentage> 値 */
inset-inline: 10% 5%;

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

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

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

公式定義

初期値一括指定の次の各プロパティとして
適用対象位置指定要素
継承なし
パーセント値包含ブロックの論理的な幅
計算値一括指定の次の各プロパティとして
アニメーションの種類length または パーセント値, calc();

形式文法

inset-inline = 
<'top'>{1,2}

<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>
  <p class="exampleText">テキストの例</p>
</div>

CSS

css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset-inline: 20px 50px;
  background-color: #c8c800;
}

結果

仕様書

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
inset-inline
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

関連情報