CSS inset-inline 属性

定義と用法

inset-inline 属性を設定することで、要素が行方向上で親要素との距離を設定できます。

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

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

• inset-inline-start
• inset-inline-end

inset-inline 属性の値はさまざまな方法で設定できます：

inset-inline属性が2つの値を持っている場合：

inset-inline: 10px 50px;

• 始端距離は10pxです
• 終端距離は50pxです

inset-inline属性に値がある場合：

inset-inline: 10px;

• 始点と終点の距離はともに10pxです

CSSのinset-inlineと inset-block 属性はCSSの top、bottom、left および right 属性は非常に似ていますが、 inset-block および inset-inline 属性はブロック方向と行方向に依存しています。

注意：関連するCSS属性に影響を与えます writing-mode および direction 行方向を定義します。これにより、行の始点と終点、および inset-inline 属性の結果。英語ページでは、行方向は左から右、ブロック方向は下向きです。

例

例1

定位された<div>要素が行方向上で親要素との距離を設定：

div {
  inset-inline: 10px 50px;
}

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

例2

<div>要素の writing-mode 属性値がvertical-rlに設定された場合、行方向は下向きになります。結果として、要素の始点は左側から上方向に、終点は右側から下方向に移動します：

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

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

例3

<div>要素の direction 属性値がrtlに設定された場合、行方向は右から左になります。結果として、要素の始点は左側から右側に、終点は右側から左側に移動します：

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

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

CSS 文法

inset-inline: auto|length|initial|inherit;

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 定位

参考：CSS position 属性

参考：CSS direction 属性

参考：CSS writing-mode 属性