並び・配置

`inset` 上下左右の位置をまとめて指定する

重要度4 / 5

意味

top、right、bottom、left を一つにまとめた指定です。inset: 0 は、配置の基準になる親の四辺に子をぴったり付けます。オーバーレイや、親いっぱいに広げる枠で使います。

position が初期値の static のままでは効きません。子に absolute、親に relative を先に付けます。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="frame">
  <div class="cover"></div>
</div>

CSS

.frame {
  position: relative;
  height: 6rem;
  background: #efeef8;
}
.cover {
  position: absolute;
  inset: 0.5rem;
  background: #d9d6e8;
}

プレビュー

長さを計算して入れる書き方です。関数の一覧から詳細を開けます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）