Written by Kasumi

【CSS】insetプロパティでpositionの上下左右配置を簡単に指定する方法

positionの上下左右(top left right bottom)を一括で指定したい。

本記事ではこのような悩みを解決します。

insetプロパティでpostion配置を指定する方法

/* 中央配置 */
span {
  height: 10px;
  width: 100px;
  position: absolute;
  /* 上下左右を0指定 */
  inset: 0;
  margin: auto;
}

positionの上下左右(top left right bottom)を一括で指定したコード例です。

通常、ある要素をpositionで中央配置にするにはtop left right bottomプロパティを0に指定にします。

insetプロパティを使う事で、margin、paddingプロパティと同じように一括で上下左右を指定できます。

insetプロパティの使い方は以下の通りです。

inset: 上 右 下 左;

本コード例では0を指定。

上記によって、top、right、bottom、leftプロパティを全て0指定したものと同じ意味になります。

まとめ

CSSのinsetプロパティでpositionの上下左右配置を簡単に指定する方法について紹介しました。

以上で解説を終わります。

目次

関連記事

HTMLCSS

CSSのwhite-space nowrapを子要素だけ解除する方法

2022.08.28
1542
HTMLCSS

CSSで直前・後方の兄弟要素を指定する方法

2023.04.27
263
HTMLCSS

CSSで背景の半分だけ単色もしくは画像を指定する方法

2022.12.16
2669
HTMLCSS

【コピペ用】CSSでへこむボタンを作成する方法

2022.06.11
1586