CSS3

：

プロパティ

：

inset

　 編集：2022.07.17 by T.A.

→●、mdn

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

名前 inset
値 <'top'>{1,4}
初期値 auto
適用対象 有位置な要素
継承 されない
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 算出された値型による

inset プロパティは、すべてのインセット プロパティを単独の宣言で設定する略式プロパティであり、各側を表現している下位プロパティを 時計回りに設定する。

注記： inset プロパティ値は、既定では、対応する物理的な下位プロパティ ― top、right、bottom、left ― にあてがわれるが、歴史的な理由から、これらには inset‐接頭辞は無い。このふるまいは、margin など、他の“各側に 4 個の値をあてがう”プロパティに合致する。

このようなプロパティをフロー相対な下位プロパティに解決するのを許容することは、[CSS-LOGICAL-1] にて論の最中にある。

たしかに、inset が どの inset-＊ プロパティにも展開されないのは、軽く惑わすものになろうことは理解している。 

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


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


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

テスト
HTML：

ここに表示
¶[Edge]✖？
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：