CSS 스크롤 마진 인라인 스타트 속성

정의 및 사용법

scroll-margin-inline-start 속성은 행내 방향에서吸附位置와 컨테이너 간의 거리를 지정합니다.

이를 통해, 당신이 스크롤을 멈추면, 스크롤이 빠르게 조정되고, 서브 엘리먼트 시작 위치와 컨테이너 사이에서 행내 방향으로 지정된 거리에 멈춥니다.

행내 방향은 다음 문자가 현재 문자에 비해 행 안에서 위치를 배치하는 방향을 의미하며, 이는 CSS display: inline; 를 가진 태그(예: <a> 및 <strong> 태그)가 텍스트 내에서 레이아웃하는 방식입니다. 행내 방향은 쓰기 언어에 따라 다르며, 예를 들어 아랍어의 새 문자는 오른쪽에서 왼쪽으로 정렬되기 때문에 행내 방향은 오른쪽에서 왼쪽으로 이어집니다. 영어 페이지의 행내 방향은 왼쪽에서 오른쪽으로 이어집니다. 행내 방향은 CSS 속성을 통해 설정할 수 있습니다. direction 와 writing-mode 정의.

부착 위치는 스크롤을 멈추면 자식 요소가 컨테이너 안에 부착된 위치를 의미합니다.

주의:이 속성은 scroll-snap-align 속성이 행 내 방향을 'start'으로 설정될 때만 작동합니다.

CSS의 scroll-margin-inline 와 scroll-margin-block 속성은 CSS 속성 CSS 스크롤 마진 상단 속성와scroll-margin-bottom와스크롤-마진-왼쪽 와 scroll-margin-right 매우 유사하지만 scroll-margin-block 와 scroll-margin-inline 속성은 블록 방향과 행 내 방향에 따라 달라집니다.

예제

예제 1

행 내 방향에서, 부착 위치에서 스크롤 가능 컨테이너로의 거리를 설정합니다:

div {
  scroll-margin-inline-start: 20px;
}

직접 테스트해 보세요

예제 2

<div> 요소의 writing-mode 속성 값을 vertical-rl로 설정하면, 행 내 방향은 아래로 됩니다. 결과는 요소의 시작 위치가 왼쪽에서 상단으로 이동합니다:

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

직접 테스트해 보세요

예제 3

<div> 요소의 direction 속성 값을 rtl로 설정하면, 행 내 방향은 오른쪽에서 왼쪽으로 됩니다. 결과는 요소의 시작 위치가 왼쪽으로 조정됩니다(원래 방향에 비해 실제로는 오른쪽에서 시작하지만, 여기서의 '왼쪽'은 원래 기본 방향(ltr)의 왼쪽을 의미합니다):

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

직접 테스트해 보세요

CSS 문법

inset-inline-start: 0|value|initial|inherit;

속성 값

기술 세부 사항

브라우저 지원

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

관련 페이지

참조:CSS 방향 속성

참조:CSS 스크롤 스내프 앨리어트 속성

참조:CSS 스크롤 스내프 타입 속성

참조:CSS 쓰러짐 모드 속성