CSS inset-block 속성

정의와 사용법

inset-block 부모 요소와 블록 방향에서의 거리를 설정하는 요소.

주의:이 속성이生效하기 위해서는 반드시 지정해야 합니다. position 속성.

inset-block 속성은 다음 속성의 약자입니다:

• inset-block-start
• 인셋-블록-엔드

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

inset-block 속성에 값이 두 개 있다면:

inset-block: 10px 50px;

• 시작 거리는 10px입니다
• 종료 거리는 50px입니다

inset-block 속성에 값이 하나 있다면:

inset-block: 10px;

• 시작과 종료 거리 모두 10px입니다

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

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

예제

예제 1

이미 정위치된 <div> 요소가 블록 방향으로 부모 요소와의 거리를 설정하면:

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

직접 테스트해 보세요

예제 2

when the <div> element's writing-mode 속성 값을 vertical-rl로 설정할 때, 요소의 시작 위치는 상단에서 우측으로 이동하고, 요소의 종료 위치는 하단에서 좌측으로 이동합니다:

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

직접 테스트해 보세요

CSS 문법

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

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

교본:CSS 정위치

참조:CSS position 속성

참조:CSS inset-block-end 속성

참조:CSS inset-block-start 속성

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