CSS padding-block 속성

정의와 사용법

요소의 padding-block 은 그 경계선에서 내용까지 블록 방향의 공간을 의미하며, 다음 속성의 약자입니다:

padding-block 属性的值可以通过不同的方式设置：

如果 padding-block 属性有两个值：

padding-block: 10px 50px;
  • 속성 값은 다양한 방식으로 설정할 수 있습니다:
  • 속성 값이 두 가지인 경우:

시작점의 내간격이 10px입니다

종료점의 내간격이 50px입니다
  • 속성 값이 하나인 경우:

padding-block: 10px; padding-block padding-right 와 매우 유사하지만 시작점과 종료점의 내간격이 모두 10px입니다 CSSpadding-top속성은 CSS 속성padding-toppadding-bottom padding-right 와 padding-left padding-block padding-right 와 매우 유사하지만 padding-inline

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

인스턴스

예제 1

락 방향의 양쪽에 내간격을 설정합니다:

p {
  padding-block: 35px;
}

본인이 직접 테스트해 보세요

예제 2

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

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

본인이 직접 테스트해 보세요

CSS 문법

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

속성 값

값 설명
자동 기본값. 요소의 기본 padding-block 값.
길이

px, pt, cm 등의 단위로 padding-block를 지정합니다. 음수 값을 허용하지 않습니다.

참조:CSS 단위.
% padding-block를 부모 요소의 행内向에서의 크기의 백분율로 지정합니다.
기본값 이 속성을 기본값으로 설정합니다. 참조: 기본값.
상속 부모 요소에서 이 속성을 상속합니다. 참조: 상속.

기술 세부 사항

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

브라우저 지원

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

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

관련 페이지

참조:CSS padding-block-end 속성

참조:CSS padding-block-start 속성

참조:CSS padding-inline 속성

참조:CSS padding-bottom 속성

참조:CSS padding-left 속성

참조:CSS padding-right 속성

참조:CSS padding-top 속성

참조:CSS 쓰기-모드 속성