CSS inset-inline-end 属性

定義と使用方法

inset-inline-end 属性を指定して、要素の行方向の端と親要素の間の距離を設定する必要があります。

注意：この属性が効果を発揮するためには、 position 属性と似ています。

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

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

例

例 1

定位された <div> 要素の行方向の端と親要素の間の距離を設定します：

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

自分で試してみてください

例 2

when the <div> element's writing-mode 属性値が vertical-rl に設定されている場合、行方向は下方向になります。結果として、要素の端は右側から下部に移動します：

div {
  inset-inline-end: 50px;
  writing-mode: vertical-rl;
}

自分で試してみてください

例 3

when the <div> element's direction 属性値が rtl に設定されている場合、行方向は右から左になります。結果として、要素の端は右側から左側に移動します：

div {
  inset-inline-end: 50px;
  direction: rtl;
}

自分で試してみてください

CSS 言語

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

属性値

技術的詳細

ブラウザのサポート

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

関連ページ

チュートリアル：CSS 定位

参照：CSS position 属性

参照：CSS direction 属性

参照：CSS writing-mode 属性