padding 속성

padding 속성은 요소의 내부 여백을 설정합니다. 속성 값으로는 크기 단위를 사용할 수 있습니다. 기본적으로 각 브라우저는 요소에 다양한 여백을 추가할 수 있습니다. 이 속성은 padding-top, padding-right, padding-bottom, padding-left 속성에 대한 단축 속성입니다.

문법

선택자 {
	padding: 값;
}

매개변수 개수

padding 속성은 1개, 2개, 3개 또는 4개의 값을 공백으로 구분하여 받을 수 있습니다:

개수	설명
`1`	하나의 값은 요소의 모든 면에 대한 여백을 설정합니다.
`2`	첫 번째 값은 위쪽과 아래쪽 여백을 설정하고, 두 번째 값은 오른쪽과 왼쪽 여백을 설정합니다.
`3`	첫 번째 값은 위쪽 여백을 설정하고, 두 번째 값은 오른쪽과 왼쪽 여백을, 세 번째 값은 아래쪽 여백을 설정합니다.
`4`	첫 번째 값은 위쪽 여백을 설정하고, 두 번째 값은 오른쪽, 세 번째 값은 아래쪽, 네 번째 값은 왼쪽 여백을 설정합니다.

예시

이 경우 기본적으로 내부 여백은 0이며 텍스트가 블록 경계에 붙어 있을 것입니다:

<div id="elem">
	some long text
</div>

#elem {
	padding: 0;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

예시

이제 30px의 내부 여백을 만들어 보겠습니다:

<div id="elem">
	some long text
</div>

#elem {
	padding: 30px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

예시

이제 위쪽과 아래쪽 여백은 20px, 오른쪽과 왼쪽은 5px가 될 것입니다:

<div id="elem">
	some long text
</div>

#elem {
	padding: 20px 5px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

예시

이제 위쪽 여백은 5px, 오른쪽 - 15px, 아래쪽 - 25px, 왼쪽 - 35px입니다:

<div id="elem">
	some long text
</div>

#elem {
	padding: 5px 15px 25px 35px;
	width: 300px;
	border: 1px solid black;
	text-align: justify;
}

함께 보기

외부 여백을 설정하는 margin 속성