padding-top 속성의 이해

padding-top 속성은
요소 위쪽 경계(border)와 내용(content) 사이의 여백 간격을 지정합니다.

여백 간격을 패딩 영역(안쪽 여백)이라고 말합니다.

padding-top은 요소 위쪽 패팅 영역의 높이를 설정합니다.

padding-top
padding-top

데모

다음의 CSS 데모로 padding-top 속성의 사용 방법을 확인해 보세요.

CSS 데모: padding-top 데모 버튼을 클릭해 보세요!

형식 구문

CSS 
selector {
    padding-top:  <길이> | <퍼센트(%)>
}

구문

CSS 
/* <길이> 단위 값 */
padding-top: 20px;
padding-top: 3em;

/* <퍼센트(%)> 단위 값 */
padding-top: 10%; /* 부모 요소 너비의 10% */
padding-top: 50%; /* 부모 요소 너비의 50% */

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

형식 정의

padding-top 속성의 형식 정의
초깃값 0
적용 요소 내부 테이블 요소(<td>, <th>, <caption> 제외)를 제외한 모든 요소
상속 아니오
애니메이션 예

값

padding-top 속성은 <길이> 단위 값과 <퍼센트(%)> 단위 값을 사용할 수 있습니다.

<길이> 단위 값

길이 단위의 값은 항상 양수입니다. (음수 값은 유효하지 않습니다.)

상대적 <길이> 단위
  • rem - 루트 요소인 <html> 요소의 font-size를 의미합니다. rem은 root em(element)을 나타냅니다.
  • em - 현재 요소의 font-size를 1em의 기준으로 합니다.

CSS rem과 em 단위 – 올바른 이해와 사용 방법을 참조하세요.

절대적 <길이> 단위
  • px
  • vh
  • vw
  • CSS에서 사용 가능한 길이 단위

<퍼센트(%)> 단위 값

부모 요소의 너비에 대한 백분율로 정의합니다. (음수 값은 유효하지 않습니다.)

예제
HTML 
<div class="parent">
    <div class="child">
        <div class="content">content</div>
    </div>
</div>
CSS 
.parent {
    width: 200px;
    border: 5px dashed red;
}
.child {
    padding-top: 10%; /* 20px(.parent width 200px의 10%) */
    border: 10px solid #fddd9b;
    background-color: #c2d089;
}
.content {
    border: 1px dashed;
    background-color: white;
}
실제 적용된 모습

브라우저의 기본 스타일시트

padding-top 속성의 초깃값은 0입니다.
하지만, 브라우저의 기본 스타일시트에서 padding-top의 값이 별도로 설정되어 있는 요소들이 있습니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.

HTML 
<textarea>textarea</textarea>
<hr>
<input type="text" placeholder="text">
<hr>
<input type="number" placeholder="number">
<hr>
<input type="email" placeholder="email">
<hr>
<input type="search" placeholder="search">
<hr>
<input type="tel" placeholder="tel">
<hr>
<input type="url" placeholder="url">
<hr>
<button>button</button>
실제 적용된 모습

관련 속성

padding-top 이외에도 요소의 패딩 영역을 지정하는 관련된 속성들이 있습니다.

패딩 영역을 지정하는 관련된 속성들
padding 요소의 네 측면 패팅 영역을 한 번에 지정합니다.
padding-bottom 요소의 아래쪽 패팅 영역을 지정합니다.
padding-left 요소의 왼쪽 패팅 영역을 지정합니다.
padding-right 요소의 오른쪽 패팅 영역을 지정합니다.

예제

다음은 <p> 요소에 <길이> 단위 값과 <퍼센트(%)> 단위 값으로 padding-top을 지정하는 예제입니다.

HTML 
<p class="ex-1">padding-top: 2em;(2em은 현재 글자 크기의 2배를 의미합니다.)</p>
<p class="ex-2">padding-top: 13%;(13%는 부모 요소 너비의 13% 크기를 의미합니다.)</p>
CSS 
p {
    border: 1px solid red;
}
.ex-1 {
    padding-top: 2em;
}
.ex-2 {
    padding-top: 13%;
}
실제 적용된 모습

브라우저 호환성

padding-top 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
padding-top 1 12 1 1

명세서

padding-top 속성의 명세서 사양
명세서 사양
padding-top CSS Box Model Module Level 3
#padding-physical

참고문헌

같이 보기