padding-top CSS 속성은 요소의 위쪽에 안쪽 여백 영역을 설정합니다.

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

The effect of the CSS padding-top property on the element box

참고: padding 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.


/* <length> 값 */
padding-top: 0.5em;
padding-top: 0;
padding-top: 2cm;

/* <percentage> 값 */
padding-top: 10%;

/* 전역 값 */
padding-top: inherit;
padding-top: initial;
padding-top: unset;

padding-top 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

여백의 크기로 고정값 사용.
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.

형식 구문

<length> | <percentage>


.content { padding-top: 5%; }
.sidebox { padding-top: 10px; }


Specification Status Comment
CSS Basic Box Model
The definition of 'padding-top' in that specification.
Working Draft No change.
CSS Transitions
The definition of 'padding-top' in that specification.
Working Draft Defines padding-top as animatable.
CSS Level 2 (Revision 1)
The definition of 'padding-top' in that specification.
Recommendation No change.
CSS Level 1
The definition of 'padding-top' in that specification.
Recommendation Initial definition.
적용대상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.
Percentagesrefer to the width of the containing block
Computed valuethe 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
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
padding-topChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0


Full support  
Full support

같이 보기