padding
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다.
시도해보기
요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.
참고: padding은 요소의 내부에 빈 공간을 추가합니다. 반면 margin은 요소의 주위에 빈 공간을 만듭니다.
구문
css
/* 네 면 모두 적용 */
padding: 1em;
/* 세로방향 | 가로방향 */
padding: 5% 10%;
/* 위 | 가로방향 | 아래 */
padding: 1em 2em 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 5px 1em 0 2em;
/* 전역 값 */
padding: inherit;
padding: initial;
padding: unset;
padding 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 <length>, <percentage> 중 하나로, 음수 값은 유효하지 않습니다.
- 한 개의 값은 모든 네 면의 여백을 설정합니다.
- 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
- 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
- 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)
값
<length>-
여백의 크기로 고정값 사용.
<percentage>-
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
형식 구문
padding =
<'padding-top'>{1,4}
<padding-top> =
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
예제
간단한 예제
HTML
html
<h4>평범한 안쪽 여백을 가진 요소.</h4>
<h3>엄청난 안쪽 여백을 가진 요소!</h3>
CSS
css
h4 {
background-color: lime;
padding: 20px 50px;
}
h3 {
background-color: cyan;
padding: 110px 50px 50px 110px;
}
더 많은 예제
css
padding: 5%; /* 모두 5% */
padding: 10px; /* 모두 10px */
padding: 10px 20px;
/* 상하: 10px */
/* 좌우: 20px */
padding: 10px 3% 20px;
/* 상: 10px */
/* 좌우: 3% */
/* 하: 20px */
padding: 1em 3px 30px 5px;
/* 상: 1em */
/* 우: 3px */
/* 하: 30px */
/* 좌: 5px */
명세
| Specification |
|---|
| CSS Box Model Module Level 3 # padding-shorthand |
| 초기값 | as each of the properties of the shorthand: |
|---|---|
| 적용대상 | 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 |
| 계산 값 | as each of the properties of the shorthand:
|
| Animation type | a length |
브라우저 호환성
BCD tables only load in the browser