CSS inset-inline-end 속성

정의와 사용법

inset-inline-end 속성을 설정하여 요소의 행 방향 끝과 부모 요소 간의 거리를 지정해야 합니다.

주의:이 속성을 효과적으로 사용하려면, position 속성과

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

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

정위치된 <div> 요소의 행 방향 끝과 부모 요소 간의 거리를 설정합니다:

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

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

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

when the <div> element's direction 속성 값을 rtl로 설정할 때, 행 방향은 오른쪽에서 왼쪽으로입니다. 결과는 요소의 끝이 오른쪽에서 왼쪽으로 이동합니다:

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

inset-inline-end: 자동|길이|기본값|상속;

값	설명
자동	기본 값. 요소의 기본 내嵌 거리.
길이	px, pt, cm 등의 단위로 거리를 지정합니다. 음수 값을 허용합니다. 참고:CSS 단위。
%	부모 요소에 비해 해당 축에서의 퍼센트 거리를 지정합니다。
기본값	이 속성을 기본 값으로 설정합니다. 참고: 기본값。
상속	부모 요소에서 이 속성을 상속합니다. 참고: 상속。

기본 값:	자동
상속성:	아니요
애니메이션 제작:	지원。보기:애니메이션 관련 속성。
버전：	CSS3
JavaScript 문법：	object.style.insetInlineEnd="30%"

표中的数字表示首个完全支持该属性的浏览器版本。

크롬	에지	파이어폭스	사파리	오페라
87.0	87.0	63.0	14.1	73.0