CSS padding 속성 – 요소 안쪽의 여백 간격 지정

`padding` 속성의 이해

padding 속성은
요소의 경계(border)와 내용(content) 사이에 있는
네 측면(위, 아래, 왼쪽, 오른쪽)의 여백 간격을 지정해서 디자인 레이아웃을 구성하는 데 사용됩니다.

요소 경계와 내용 사이의 여백 간격을 패딩 영역(padding area)이라고 말합니다.

단축 속성(shorthand property)

padding 속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

padding 속성의 구성 속성
`padding-top`	패딩 영역의 위쪽 간격을 지정합니다.
`padding-bottom`	패딩 영역의 아래쪽 간격을 지정합니다.
`padding-left`	패딩 영역의 왼쪽 간격을 지정합니다.
`padding-right`	패딩 영역의 오른쪽 간격을 지정합니다.

위 속성들은 각각 요소의 한 측면에 대한 패딩 영역을 개별적으로 설정할 수 있습니다.

padding 속성은 요소의 네 측면 패팅 영역을 한 번에 설정할 수 있어 매우 편리합니다.

데모

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

형식 구문

구문

CSS

/* 네 측면 모두 적용 */
padding: 20px;

/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
padding: 20px 50px; /* 20px: 위와 아래 측면, 50px: 왼쪽과 오른쪽 측면 */

/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
padding: 0 50px 20px; /* 0: 위 측면, 50px: 왼쪽과 오른쪽 측면, 20px: 아래 측면 */

/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */ /* 시계 방향으로 */
padding: 0 10px 30px 50px; /* 0: 위 측면, 10px: 오른쪽 측면, 30px: 아래 측면, 50px: 왼쪽 측면 */

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

형식 정의

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

값

padding 속성은 <길이> 단위 값과 <백분율(%)> 단위 값을 사용할 수 있습니다.

`<길이>` 단위 값

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

상대적 `<길이>` 단위

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

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

절대적 `<길이>` 단위

px
vh
vw
CSS에서 사용 가능한 길이 단위

`<백분율(%)>` 단위 값

컨테이닝 블록(containing block)의 너비에 대한 백분율로 정의합니다. (음수 값은 유효하지 않습니다.)

예제

CSS

.parent {
    width: 200px;
    border: 5px dashed red;
}
.child {
    padding: 10%; /* 네 측면 모두 20px(.parent width 200px의 10%) */
    border: 10px solid #fddd9b;
    background-color: #c2d089;
}
.content {
    border: 1px dashed;
    background-color: white;
}

값 지정하기

padding 속성은 한 개, 두 개, 세 개, 네 개의 값으로 지정할 수 있습니다.

한 개 값

한 개의 값을 지정하면 이 값이 네 측면 모두에 적용됩니다.

예제

CSS

.parent {
    border: 10px solid #fddd9b;
    background-color: #c2d089;
    padding: 20px;
}
.child {
    border: 1px dashed;
    background-color: white;
}

두 개 값

두 개의 값을 지정하면 첫 번째는 위와 아래 측면, 두 번째는 왼쪽과 오른쪽 측면에 적용됩니다.

CSS

/* 위와 아래 측면 | 왼쪽과 오른쪽 측면 */
padding: 20px 50px; /* 20px: 위와 아래 측면,
                       50px: 왼쪽과 오른쪽 측면 */

예제

CSS

.parent {
    border: 10px solid #fddd9b;
    background-color: #c2d089;
    padding: 20px 50px;
}
.child {
    border: 1px dashed;
    background-color: white;
}

세 개 값

세 개의 값을 지정하면 첫 번째는 위 측면, 두 번째는 왼쪽과 오른쪽 측면, 세 번째는 아래 측면에 적용됩니다.

CSS

/* 위 측면 | 왼쪽과 오른쪽 측면 | 아래 측면 */
padding: 0 50px 20px; /* 0: 위 측면,
                         50px: 왼쪽과 오른쪽 측면,
                         20px: 아래 측면 */

예제

CSS

.parent {
    border: 10px solid #fddd9b;
    background-color: #c2d089;
    padding: 0 50px 20px;
}
.child {
    border: 1px dashed;
    background-color: white;
}

네 개 값

세 개의 값을 지정하면 시계 방향 순서대로 첫 번째는 위 측면, 두 번째는 오른쪽 측면, 세 번째는 아래 측면, 네 번째는 왼쪽 측면에 적용됩니다.

CSS

/* 위 측면 | 오른쪽 측면 | 아래 측면 | 왼쪽 측면 */ /* 시계 방향으로 */
padding: 0 10px 30px 50px; /* 0: 위 측면,
                              10px: 오른쪽 측면,
                              30px: 아래 측면,
                              50px: 왼쪽 측면 */

예제

CSS

.parent {
    border: 10px solid #fddd9b;
    background-color: #c2d089;
    padding: 0 10px 30px 50px;
}
.child {
    border: 1px dashed;
    background-color: white;
}

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

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

<textarea>
<input type="text">, <input type="password">, <input type="number">, <input type="email">, <input type="search">, <input type="tel">, <input type="url"> 등 텍스트를 입력할 수 있는 컨트롤 요소
<input type="button">, <input type="reset">, <input type="submit">
<button>
<ul>
<ol>

부연설명
각 브라우저는 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>
<input type="button" value="input button">
<hr>
<input type="reset" value="input reset">
<hr>
<input type="submit" value="input submit">
<hr>
<button>button</button>
<hr>
<ul>
    <li>ul item</li>
</ul>
<hr>
<ol>
    <li>ol item</li>
</ol>

브라우저 호환성

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

명세서

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

참고문헌

MDN - padding

padding 속성의 이해