CSS inset 속성

정의와 사용법

inset 요소와 부모 요소 간의 거리를 설정하는 속성입니다。

}}주의: 이 속성이生效하기 위해서는 position

inset 속성

• 속성은 다음 속성의 약자입니다:
• top
• bottom
• left

inset right

속성 값은 다음과 같은 방식으로 설정할 수 있습니다:

inset: 15px 30px 60px 90px;

• inset 속성에 세 개의 값이 있을 때:
• inset 속성에 네 개의 값이 있을 때:
• 상단 거리는 15픽셀입니다
• 오른쪽 거리는 30픽셀입니다

왼쪽 거리는 90픽셀입니다

속성 값을 부모 요소에서 15픽셀 위쪽, 30픽셀 왼쪽과 오른쪽, 60픽셀 아래쪽으로 설정합니다:

• inset 속성에 세 개의 값이 있을 때:
• 상하 거리는 15픽셀입니다
• 상단 거리는 15픽셀입니다

하단 거리는 60픽셀입니다

예제 2

• inset 속성에 두 개의 값이 있을 때:
• 상하 거리는 15픽셀입니다

좌우 거리는 30픽셀입니다

inset 속성에 하나의 값이 있을 때:

• inset: 10px;

네 가지 방향의 거리는 모두 10픽셀입니다

사례

예제 1

div {
  위치를 설정한 <div> 요소와 부모 요소의 거리를 설정합니다:
}

직접 테스트해 보세요

예제 1

<div> 요소의 inset 속성 값을 부모 요소에서 35픽셀로 설정합니다:

div {
  예제 2
}

직접 테스트해 보세요

속성 값을 부모 요소에서 15픽셀 위쪽과 아래쪽, 30픽셀 왼쪽과 오른쪽으로 설정합니다:

<div> 요소의 inset 예제 3

div {
  속성 값을 부모 요소에서 15픽셀 위쪽, 30픽셀 왼쪽과 오른쪽, 60픽셀 아래쪽으로 설정합니다:
}

직접 테스트해 보세요

예제 4

<div> 요소의 inset 속성 값을 부모 요소에서 15픽셀 위쪽, 30픽셀 오른쪽, 60픽셀 아래쪽, 90픽셀 왼쪽으로 설정합니다:

div {
  inset: 15px 30px 60px 90px;
}

직접 테스트해 보세요

CSS 문법

inset: auto|length|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

표格에 표시된 숫자는 이 속성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。

관련 페이지

강의:CSS 정위치

참조:CSS position 속성

참조:CSS bottom 속성

참조:CSS left 속성

참조:CSS right 속성

참조:CSS 톱 속성