CSS padding-inline 속성
- 이전 페이지 padding-bottom
- 다음 페이지 padding-inline-end
정의와 사용법
요소의 padding-inline 는 그의 행내 방향에서, 테두리에서 내용까지의 공간을 의미합니다. 이는 다음 속성의 줄임말 속성입니다:
padding-inline 속성 값은 다양한 방법으로 설정할 수 있습니다:
padding-inline 속성이 두 가지 값이 있을 때:
padding-inline: 10px 50px;
- 시작단의 내쪽 여백은 10px입니다
- 끝단의 내쪽 여백은 50px입니다
padding-inline 속성에 값이 하나인 경우:
padding-inline: 10px;
- 시작 부분과 끝 부분의 내테이션은 모두 10px입니다
CSS padding-inline 와 padding-block 속성은 CSS 속성 padding-top、padding-bottom、padding-left 와 padding-right 매우 유사하지만 padding-inline 와 padding-block 속성은 행 내 방향과 블록 방향에 따라 달라집니다.
주의:관련 CSS 속성 writing-mode 와 direction 행 내 방향을 정의합니다. 이는 요소의 행 내 방향의 시작 및 끝 위치, 그리고 padding-inline 속성 결과. 영어 페이지에서는 블록 방향은 아래로, 행 내 방향은 왼쪽에서 오른쪽으로입니다.
인스턴스
예제 1
행 내 방향의 양쪽에 내테이션을 설정합니다:
div {
padding-inline: 50px;
}
예제 2
<div> 요소의 writing-mode 속성 값을 vertical-rl로 설정하면 행 내 방향은 아래로입니다. 결과는 요소의 시작 부분이 왼쪽에서 위로 이동하고, 끝 부분이 오른쪽에서 아래로 이동합니다:
div {
writing-mode: vertical-rl;
padding-inline: 10px 100px;
}
예제 3
<div> 요소의 direction 속성 값을 rtl로 설정하면 행 내 방향은 오른쪽에서 왼쪽으로입니다. 결과는 요소의 시작 부분이 왼쪽에서 오른쪽으로 이동하고, 끝 부분이 오른쪽에서 왼쪽으로 이동합니다:
div {
direction: rtl;
padding-inline: 10px 100px;
}
CSS 문법
padding-inline: 자동|value|기본값|상속;
속성 값
| 값 | 설명 |
|---|---|
| 자동 | 기본. 요소의 기본 padding-inline 거리. |
| 길이 |
px, pt, cm 등의 단위로 거리를 지정합니다. 부정 값은 허용되지 않습니다。 참조:CSS 단위。 |
| % | 부모 요소의 행 내 방향의 크기를 백분율로 지정한 거리를 의미합니다。 |
| 기본값 | 이 속성을 기본 값으로 설정합니다. 참조: 기본값。 |
| 상속 | 부모 요소에서 이 속성을 상속합니다. 참조: 상속。 |
기술 세부 사항
| 기본값: | 자동 |
|---|---|
| 상속성: | 아니요 |
| 애니메이션 제작: | 지원됩니다. 참조:애니메이션 관련 속성。 |
| 버전: | CSS3 |
| 자바스크립트 문법: | object.style.paddingInline="100px 20px" |
브라우저 지원
표格에 나타난 숫자는 이 특성을 최초로 완전히 지원하는 브라우저 버전을 나타냅니다。
| 크롬 | 에지 | 파이어폭스 | 사파리 | 오페라 |
|---|---|---|---|---|
| 87.0 | 87.0 | 66.0 | 14.1 | 73.0 |
관련 페이지
참조:CSS 방향 속성
- 이전 페이지 padding-bottom
- 다음 페이지 padding-inline-end
