padding-left CSS 속성은 요소의 왼쪽에 안쪽 여백 영역을 설정합니다.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.
참고: padding 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.
구문
/* <length> 값 */
padding-left: 0.5em;
padding-left: 0;
padding-left: 2cm;
/* <percentage> 값 */
padding-left: 10%;
/* 전역 값 */
padding-left: inherit;
padding-left: initial;
padding-left: unset;
padding-left 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.
값
<length>- 여백의 크기로 고정값 사용.
<percentage>- 여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
형식 구문
예제
.content { padding-left: 5%; }
.sidebox { padding-left: 10px; }
명세
| Specification | Status | Comment |
|---|---|---|
| CSS Basic Box Model The definition of 'padding-left' in that specification. |
Working Draft | No change. |
| CSS Transitions The definition of 'padding-left' in that specification. |
Working Draft | Defines padding-left as animatable. |
| CSS Level 2 (Revision 1) The definition of 'padding-left' in that specification. |
Recommendation | No change. |
| CSS Level 1 The definition of 'padding-left' in that specification. |
Recommendation | Initial definition. |
| 초기값 | 0 |
|---|---|
| 적용대상 | all elements, except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column. It also applies to ::first-letter and ::first-line. |
| 상속 | no |
| Percentages | refer to the width of the containing block |
| Computed value | the percentage as specified or the absolute length |
| Animation type | a length |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.