CSS insetジェネレーター

CSS insetプロパティで要素の配置を一括指定。top/right/bottom/leftのショートハンド。

position

単位

top

right

bottom

left

クイック設定

生成されたCSS

.element {
  position: absolute;
  inset: 0px;
}

/* 展開形式 */
.element {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

プレビュー

親要素

配置要素

inset: 0px 0px 0px 0px

• 1値: 全方向に適用

• 2値: 上下左右

• 3値: 上左右下

• 4値: 上右下左

CSS insetプロパティについて

insetはposition指定された要素の配置を一括で設定するショートハンドプロパティです。 top、right、bottom、leftの4つのプロパティを1行で記述できます。

全画面オーバーレイの作成（inset: 0）、中央配置の調整、固定ヘッダー・フッターの配置など、絶対配置・固定配置要素のレイアウトに便利です。

Chrome 87+、Firefox 66+、Safari 14.1+など、モダンブラウザで広くサポートされています。