CSS padding-block-end 속성
- 이전 페이지 padding-block
- 다음 페이지 padding-block-start
강의 추천:
정의와 사용법 요소의
padding-block-end
는 요소의 테두리에서 내용의 블록 방향 끝까지의 공간을 의미합니다. padding-block
과 와
CSS 속성은 CSS 속성
padding-bottompadding-top
padding-bottom、
과 padding-left
padding-right padding-block
과 와
padding-inline
속성은 블록 방향과 행 내 방향에 따라 달라집니다.주의: writing-mode
블록 방향을 정의합니다. 이는 블록의 시작 및 끝 위치 및 관련 CSS 속성에 영향을 미칩니다. padding-block
속성 결과. 영어 페이지에서는 블록 방향은 아래로, 행 내 방향은 왼쪽에서 오른쪽으로 이동합니다.
예제
예제 1
블록 방향의 끝에서 내간격을 설정합니다:
p { padding-block-end: 35px; }
예제 2
<div> 요소의 writing-mode 속성 값을 vertical-rl로 설정하면, 블록 방향은 오른쪽에서 왼쪽으로 이동합니다. 결과는 요소의 끝 위치가 하단에서 왼쪽으로 이동합니다:
div { writing-mode: vertical-rl; padding-block-end: 50px; }
CSS 문법
padding-block-end: 자동|value|기본값|상속;
속성 값
값 | 설명 |
---|---|
자동 | 기본값. 요소의 기본 padding-block-end 값. |
길이 |
px, pt, cm 등의 단위로 padding-block-end를 지정합니다. 음수 값을 허용하지 않습니다. 참고:CSS 단위。 |
% | padding-block-end는 부모 요소의 행 내 방향 크기의 백분율로 지정됩니다. |
기본값 | 이 속성을 기본값으로 설정합니다. 참고: 기본값。 |
상속 | 부모 요소에서 이 속성을 상속합니다. 참고: 상속。 |
기술 세부 사항
기본값: | 자동 |
---|---|
상속성: | 아니요 |
애니메이션 제작: | 지원됩니다. 참고:애니메이션 관련 속성。 |
버전: | CSS3 |
JavaScript 문법: | object.style.paddingBlockEnd="100px" |
브라우저 지원
표格에 표시된 숫자는 이 속성을 최초로 완벽하게 지원하는 브라우저 버전을 나타냅니다.
크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
---|---|---|---|---|
87.0 | 87.0 | 41.0 | 12.1 | 73.0 |
관련 페이지
- 이전 페이지 padding-block
- 다음 페이지 padding-block-start