CSS padding-block-start 속성

정의와 사용법

요소의 padding-block-start 은 블록 방향의 시작 부분에서 브라우저로부터 내용까지의 공간을 의미합니다.

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

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

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

p {
  padding-block-start: 35px;
}

다음 <div> 요소의 writing-mode 속성 값을 vertical-rl로 설정할 때, 블록 방향은 오른쪽에서 왼쪽으로입니다. 결과는 요소의 시작 위치가 상단에서 오른쪽으로 이동합니다:

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

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

값	설명
자동	기본. 요소의 기본 padding-block-start 값.
길이	px, pt, cm 등의 단위로 padding-block-start를 지정합니다. 음수 값을 허용하지 않습니다. 참고:CSS 단위.
%	padding-block-start는 부모 요소의 행 내 방향 크기의 백분율로 지정됩니다.
기본	이 속성을 기본 값으로 설정합니다. 참고: 기본.
상속	부모 요소에서 이 속성을 상속합니다. 참고: 상속.

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

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

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