CSS inset-block-start 속성

과목 추천:

inset-block-start 정의와 사용법

주의:이 속성을生效하려면, 블록 방향에서 부모 요소와의 거리를 설정해야 합니다. position 속성.

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

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

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

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

when the <div> element's writing-mode 속성 값을 vertical-rl로 설정할 때, 블록 방향은 오른쪽에서 왼쪽으로 변경됩니다. 결과는 요소의 시작 부분이 상단에서 우측으로 이동합니다:

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

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

값	설명
auto	기본 값. 요소의 기본 inset 거리를 사용합니다.
length	고정 단위(예: px, pt, cm 등)로 거리를 지정합니다. 음수 값을 허용합니다. 참고:CSS 단위.
%	거리를 백분율로 지정하여 부모 요소의 해당 축에서의 크기를 기준으로 합니다.
initial	이 속성을 기본 값으로 설정합니다. 참고: initial.
inherit	부모 요소에서 이 속성을 상속합니다. 참고: inherit.

기본 값:	auto
상속성:	아니요
애니메이션 제작:	지원됩니다. 참고:애니메이션 관련 속성.
버전:	CSS3
자바스크립트 문법:	object.style.insetBlockStart="100px"

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

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