CSS - inset

概要

属性名 inset
値 [auto | <length> | <percentage>]{1,4}
初期値auto
適用可能要素位置指定可能要素
継承なし
メディアvisual
アニメーション可能

サポート (説明)

説明

top, bottom, right, left を同時に指定します。

値説明
<length>距離を長さで指定します。詳細は <length> を参照してください。
<percentage>距離をパーセントで指定します。
auto自動計算します。

値を 1～4個指定可能で、それぞれ次のように解釈されます。

inset: 1rem;                /* inset: 上下左右 */
inset: 1rem 2rem;           /* inset: 上下  左右 */
inset: 1rem 2rem 3rem;      /* inset: 上 左右 下 */
inset: 1rem 2rem 3rem 4rem; /* inset: 上 右 下 左 */

使用例

CSS
.box {
  height: 4rem;
}
.test {
  position: relative;
  inset: 1rem 2rem;
  width: 2rem;
  height: 2rem;
  border: 1px solid #999;
  text-align: center;
}
HTML
<div class="box">
  <div class="test">A</div>
</div>
表示
A

関連項目

top, bottom, right, left

リンク

Copyright (C) 2022 杜甫々
初版：2022年7月31日、最終更新：2022年7月31日
https://www.tohoho-web.com/css/prop/inset.htm