CSS padding-inline-start 속성

정의와 사용법

요소의 padding-inline-start 속성은 행 내 방향의 시작 부분에서 경계선에서 내용까지의 공간을 의미합니다.

CSS padding-inlinepadding-block 속성은 CSS 속성 padding-toppadding-bottompadding-leftpadding-right 매우 유사하지만 padding-inlinepadding-block 속성은 행 내 방향과 블록 방향에 따라 달라집니다.

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

예제

예제 1

행 내 방향의 시작 부분에 내간격을 설정합니다:

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

직접 테스트해 보세요

예제 2

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

div {
  writing-mode: vertical-rl;
  padding-inline-start: 100px;
}

직접 테스트해 보세요

예제 3

다음 <div> 요소의 direction 속성 값을 rtl로 설정하면 행 내 방향은 오른쪽에서 왼쪽으로입니다. 결과는 요소의 시작 위치가 왼쪽에서 오른쪽으로 이동합니다:

div {
  direction: rtl;
  padding-inline-start: 100px;
}

직접 테스트해 보세요

CSS 문법

padding-inline-start: 자동|value|기본|상속;

속성 값

설명
자동 기본. 요소의 기본 padding-inline-start 거리.
길이

px, pt, cm 등의 단위로의 거리를 지정합니다. 음수 값을 사용할 수 없습니다.

참고:CSS 단위

% 부모 요소에 비해 행 내 방향에서 크기의 백분율 거리를 지정합니다.
기본 이 속성을 기본 값으로 설정합니다. 참고: 기본
상속 부모 요소에서 이 속성을 상속합니다. 참고: 상속

기술 세부 사항

기본 값: 자동
상속성: 아니요
애니메이션 제작: 지원됩니다. 참고:애니메이션 관련 속성
버전: CSS3
JavaScript 문법: object.style.paddingInlineStart="100px"

브라우저 지원

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

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

관련 페이지

참조:CSS 방향 속성

참조:CSS padding-inline 속성

참조:CSS padding-inline-end 속성

참조:CSS padding-bottom 속성

참조:CSS padding-left 속성

참조:CSS padding-right 속성

참조:CSS padding-top 속성

참조:CSS 쓰러짐 모드 속성