CSS inset-inline 속성

정의와 사용법

inset-inline 속성이 설정되면 요소가 행 방향에서 부모 요소와의 거리를 정의합니다.

주의:이 속성이 효과를 발휘하려면 설정해야 합니다 position 속성.

inset-inline 속성은 다음 속성의 축약형 속성입니다:

• inset-inline-start
• 인셋-인라인-엔드

inset-inline 속성 값은 다양한 방법으로 설정할 수 있습니다:

inset-inline 속성이 두 값이 있을 때:

inset-inline: 10px 50px;

• 시작점 거리는 10px입니다
• 끝점 거리는 50px입니다

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

inset-inline: 10px;

• 시작 끝과 끝 끝의 거리가 모두 10px입니다

CSS의 inset-inline과 inset-block 속성은 CSS의 top、bottom、left 와 right 속성은 매우 유사하지만 inset-block 와 inset-inline 속성은 블록 방향과 행 방향에 따라 달라집니다.

주의:와 관련된 CSS 속성에 영향을 미칩니다. writing-mode 와 direction 행 방향을 정의합니다. 이는 행의 시작과 끝 위치, 그리고 inset-inline 속성의 결과. 영어 페이지에서 행 방향은 왼쪽에서 오른쪽으로, 블록 방향은 아래로입니다.

인스턴스

예제 1

위치를 설정한 <div> 요소가 행 방향에서 부모 요소와의 거리를 설정합니다:

div {
  inset-inline: 10px 50px;
}

본인이 직접 테스트해 보세요

예제 2

<div> 요소의 writing-mode 속성 값이 vertical-rl로 설정되면, 행 방향은 아래로 변경됩니다. 결과는 요소의 시작 끝이 왼쪽에서 위쪽으로 이동하고, 끝 끝이 오른쪽에서 아래로 이동합니다:

div {
  inset-inline: 15px 30px;
  writing-mode: vertical-rl;
}

본인이 직접 테스트해 보세요

예제 3

<div> 요소의 direction 속성 값이 rtl로 설정되면, 행 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과는 요소의 시작 끝이 왼쪽에서 오른쪽으로 이동하고, 끝 끝이 오른쪽에서 왼쪽으로 이동합니다:

div {
  inset-inline: 15px 30px;
  direction: rtl;
}

본인이 직접 테스트해 보세요

CSS 문법

inset-inline: auto|length|initial|thừa kế;

속성 값

기술 세부 사항

브라우저 지원

표格에서의 숫자는 이 특성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다.

관련 페이지

교육:CSS 정위치

참조:CSS position 속성

참조:CSS 방향 속성

참조:CSS 워팅-모드 속성