CSS3

：

プロパティ

：

inset-block、inset-inline

　編集：2022.07.03 by T.A.

フロー相対なオフセット：略式プロパティ。

名前	`inset-block`、 `inset-inline`
値	<'top'>{1,2}
初期値	個々のプロパティを見よ
適用対象	個々のプロパティを見よ
継承	個々のプロパティを見よ
百分率	個々のプロパティを見よ
算出値	個々のプロパティを見よ
正準的順序	文法に従う
アニメーション型	個々のプロパティを見よ

これら 2 つの略式プロパティは、順に、［inset-block-start、inset-block-end］、［inset-inline-start、inset-inline-end］を設定する。2 個の値は、順に［始端、終端］辺のスタイルを表現する。値が 1 個だけ与えられた場合、それが 2 個目の値にも利用される。

<DIV style="border:1px solid black; width:150px; height:100px;
 position:relative;
">
 <SPAN style="border:1px solid red;
  position:absolute;
  inset-block:5px 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:5px 10px;
 ">SPAN</SPAN>
</DIV>

テスト

ここに表示

スクリプト：

スクリプト：

表示内容：