CSS inset-inline-start 속성

정의와 사용

inset-inline-start 속성 설정

주의:이 속성이 효과를 발휘하려면, 요소가 행 방향에서의 시작 부분과 부모 요소 간의 거리를 지정해야 합니다. position 속성.

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

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

예제

예제 1

Positioned <div> element's distance to the parent element in the line direction is set:

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

직접 테스트해 보세요

예제 2

when the <div> element's writing-mode 속성 값을 vertical-rl로 설정할 때, 행 방향은 아래로입니다. 결과는 요소의 시작 부분이 왼쪽에서 위로 이동합니다:

div {
  inset-inline-start: 50px;
  writing-mode: vertical-rl;
}

직접 테스트해 보세요

예제 3

when the <div> element's direction 속성 값을 rtl로 설정할 때, 행 방향은 오른쪽에서 왼쪽으로입니다. 이 설명에는 작은 오류가 있습니다. '결과는 요소의 시작 부분이 여전히 오른쪽에 남아 있습니다( porque para rtl, o início é sempre à direita, apenas em relação ao layout padrão ltr, todo o conteúdo é invertido)'로 해야 합니다:

div {
  inset-inline-start: 50px;
  direction: rtl;
}

직접 테스트해 보세요

CSS 문법

inset-inline-start: auto|length|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

강의:CSS 정위치

참조:CSS position 속성

참조:CSS 방향 속성

참조:CSS 쓰러잉-모드 속성