padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성입니다.

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

참고: padding은 요소의 내부에 빈 공간을 추가합니다. 반면 margin은 요소의 주위에 빈 공간을 만듭니다.

구문

/* 네 면 모두 적용 */
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>
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.

형식 구문

[ <length> | <percentage> ]{1,4}

예제

간단한 예제

HTML

<h4>평범한 안쪽 여백을 가진 요소.</h4>
<h3>엄청난 안쪽 여백을 가진 요소!</h3>

CSS

h4 {
  background-color: lime;
  padding: 20px 50px;
}

h3 {
  background-color: cyan;
  padding: 110px 50px 50px 110px;
}

더 많은 예제

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 Status Comment
CSS Basic Box Model
The definition of 'padding' in that specification.
Working Draft No change.
CSS Transitions
The definition of 'padding' in that specification.
Working Draft Defines padding as animatable.
CSS Level 2 (Revision 1)
The definition of 'padding' in that specification.
Recommendation No change.
CSS Level 1
The definition of 'padding' in that specification.
Recommendation Initial definition.

초기값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.
상속no
Percentagesrefer to the width of the containing block
Mediavisual
Computed valueas each of the properties of the shorthand:
  • padding-bottom: the percentage as specified or the absolute length
  • padding-left: the percentage as specified or the absolute length
  • padding-right: the percentage as specified or the absolute length
  • padding-top: the percentage as specified or the absolute length
Animation typea length
Canonical orderthe unique non-ambiguous order defined by the formal grammar

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
paddingChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

같이 보기

문서 태그 및 공헌자

이 페이지의 공헌자: mdnwebdocs-bot, alattalatta
최종 변경자: mdnwebdocs-bot,