CSS3

：

プロパティ

：

inset

　 編集：2022.07.17 by T.A.

→●、mdn

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

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

この略式プロパティは、その［top、right、bottom、left］プロパティを設定する。一連の成分値は、これらの下位プロパティを時計回りに設定する。

<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;
">
 <DIV style="border:1px solid red;
  position:absolute;
  inset:5px 10px 20px 30px;
 ">DIV</DIV>
</DIV>

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：