CSS inset: 오프셋 단축속성

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

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

불러오는 중...

inset: 0;
inset: 8px 8px 12px 24px;
inset: 20%;

구문

/* <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>입니다.

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

명세

브라우저 호환성

IEEdgeChromeSafariFirefox
미지원87*87*14.166
iOS SafariAndroid WebViewAndroid ChromeAndroid FirefoxSamsung Internet
14.58787*6614.0
MDN BCD에서 가져오는 데이터입니다.

마지막 업데이트:
이 페이지를 오프라인에서 볼 수 있습니다.

sorto.me

CC BY-SA 4.0

based on MDN (contributors)