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 プログラミング

【簡単】html・cssを使ってtable(テーブル)タグを角丸にする方法

2022.02.15
1907
HTMLCSS

【CSS】要素を囲ってるタグの存在を消す方法

2023.04.19
783
HTMLCSS プログラミング

【簡単】preタグ内テキストが折り返しされない問題をCSSで解決する方法

2022.01.25
1997
HTMLCSS

CSSで要素が空かどうか判別。任意のスタイルを適用する方法

2023.04.16
1048