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

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

2022.01.25
2357
HTMLCSS

justify-content: space-betweenで最後の横並び要素だけ中央に寄せる方法【CSS flexbox】

2022.10.03
6135
HTMLCSS

CSSだけで行数を指定。三点リーダーを表示する方法

2023.04.18
713
HTMLCSS プログラミング

iframe内のリンク・formを別タブで開く方法

2021.11.02
4050