This page was translated from English by the community. Learn more and join the MDN Web Docs community.
padding
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015년 7월.
padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다.
시도해 보기
padding: 1em;
padding: 10% 0;
padding: 10px 50px 20px;
padding: 10px 50px 30px 0;
padding: 0;
<section id="default-example">
<div class="transition-all" id="example-element">
<div class="box">
Far out in the uncharted backwaters of the unfashionable end of the
western spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</div>
</section>
#example-element {
border: 10px solid #ffc129;
overflow: hidden;
text-align: left;
}
.box {
border: dashed 1px;
}
요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.
참고 :
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 |
브라우저 호환성
Enable JavaScript to view this browser compatibility table.