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

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

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

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


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

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

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

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

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

형식 구문

<length> | <percentage>


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


Specification Status Comment
CSS Basic Box Model
The definition of 'padding-bottom' in that specification.
Working Draft No change.
CSS Transitions
The definition of 'padding-bottom' in that specification.
Working Draft Defines padding-bottom as animatable.
CSS Level 2 (Revision 1)
The definition of 'padding-bottom' in that specification.
Recommendation No change.
CSS Level 1
The definition of 'padding-bottom' 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 and ::first-line.
Percentagesrefer to the width of the containing block
Computed valuethe percentage as specified or the absolute length
Animation typea length

브라우저 호환성

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
padding-bottomChrome 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 14Safari iOS Full support 1Samsung Internet Android Full support 1.0


Full support  
Full support

같이 보기