CSS inset: 오프셋 단축속성

ALATTA

CSS inset: 오프셋 단축속성

CSS inset 속성은 top, right, bottom, left의 단축속성입니다. margin 단축속성과 같은 구문으로 사용할 수 있습니다.

inset은 CSS Logical Properties 명세에 속하지만 논리 오프셋은 정의하지 않습니다. inset은 요소의 쓰기 모드, 쓰기 방향, 텍스트 방향에 관계 없이 항상 물리적 오프셋을 정의합니다.

#abs {
  inset: 0;
  /* inset: 8px 8px 12px 24px; */
  /* inset: 20%; */
}

#container {
  width: 300px;
  height: 100px;
  background: aqua;
  border: 1px solid black;
  box-sizing: border-box;
  position: relative;
}

#abs {
  background: salmon;
  position: absolute;
}

<div id="container">
  <div id="abs"></div>
</div>

불러오는 중...

구문

/* <length>, <percentage> 값 */
inset: 10px; /* 모든 방향 */
inset: 4px 8px; /* 위+아래 왼쪽+오른쪽 */
inset: 5px 15px 10px; /* 위 왼쪽+오른쪽 아래 */
inset: 2.4em 3em 3em 3em; /* 위 오른쪽 아래 왼쪽 */

/* 전역 값 */
inset: inherit;
inset: initial;
inset: revert;
inset: revert-layer;
inset: unset;

inset 속성에는 한 개에서 네 개까지의 값을 사용합니다. 각각의 값은 <length> 또는 <percentage>입니다.

  • 값을 한 개 지정하면 네 방향 오프셋 모두에 적용됩니다.
  • 값을 두 개 지정하면 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 오프셋에 적용됩니다.
  • 값을 세 개 지정하면 첫 번째 값은 위, 두 번째 값은 왼쪽과 오른쪽, 세 번째 값은 아래 오프셋에 적용됩니다.
  • 값을 네 개 지정하면 각각 위, 오른쪽, 아래, 왼쪽 오프셋에 적용됩니다. (시계 방향)

명세

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
inset
anchor()
auto