CSS3

：

プロパティ

：

inset-block-start、inset-block-end、inset-inline-start、inset-inline-end

　 編集：2022.07.03 by T.A.

→●、mdn（inset-block-start、inset-block-end、inset-inline-start、inset-inline-end）

フロー相対なオフセット。

名前 inset-block-start、
inset-block-end、
inset-inline-start、
inset-inline-end
値 <'top'>
初期値 auto
適用対象 有位置な要素
継承 されない
百分率 対応する物理プロパティに対するときと同じ
算出値 対応する［top／right／bottom／left］と同じ
正準的順序 文法に従う
アニメーション型 算出値の型による

これらの各プロパティは［top／bottom／left／right］プロパティに対応する。その対応付けは、要素の［writing-mode、direction、text-orientation］に依存する。

<DIV style="border:1px solid black; width:150px; height:100px;
 position:relative;
">
 <SPAN style="border:1px solid red;
  position:absolute;
  inset-block-start:10px;
 ">SPAN</SPAN>
</DIV>


<DIV style="border:1px solid black; width:150px; height:100px;
 position:relative;
">
 <SPAN style="border:1px solid red;
  position:absolute;
  inset-inline-start:10px;
 ">SPAN</SPAN>
</DIV>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：