CSS 패딩 속성

❮ 이전 완전한 CSS 참조 다음 ❯

예시

<p> 요소의 4면 모두에 대한 패딩을 35픽셀로 설정합니다.

p {
padding: 35px;
}

아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.

정의 및 사용

요소의 패딩은 콘텐츠와 테두리 사이의 공간입니다.

속성은 다음 padding에 대한 약식 속성입니다.

참고: 패딩은 요소 내에 추가 공간을 만들고 여백은 요소 주위에 추가 공간을 만듭니다.

이 속성은 1~4개의 값을 가질 수 있습니다.

패딩 속성에 4개의 값이 있는 경우:

패딩:10px 5px 15px 20px;
- 상단 패딩은 10px입니다.
- 오른쪽 패딩은 5px입니다.
- 하단 패딩은 15px입니다.
- 왼쪽 패딩은 20px입니다.

패딩 속성에 세 가지 값이 있는 경우:

패딩:10px 5px 15px;
- 상단 패딩은 10px입니다.
- 오른쪽 및 왼쪽 패딩은 5px입니다.
- 하단 패딩은 15px입니다.

패딩 속성에 두 개의 값이 있는 경우:

패딩:10px 5px;
- 상단 및 하단 패딩은 10px입니다.
- 오른쪽 및 왼쪽 패딩은 5px입니다.

패딩 속성에 하나의 값이 있는 경우:

패딩:10px;
- 4개의 패딩은 모두 10px입니다.

참고: 음수 값은 허용되지 않습니다.

기본값:	0
상속:	아니요
애니메이션 가능:	예, 개별 속성을 참조하십시오 . 애니메이션 가능 에 대해 읽기
버전:	CSS1
자바스크립트 구문:	개체 .style.padding="100px 20px"

브라우저 지원

표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.

Property
padding	1.0	4.0	1.0	1.0	3.5

CSS 구문

padding: length|initial|inherit;

속성 값

Value	Description	Play it
length	Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units
%	Specifies the padding in percent of the width of the containing element
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

더 많은 예

예시

<p> 요소의 패딩을 위쪽 및 아래쪽에 대해 35픽셀로 설정하고 오른쪽 및 왼쪽에 대해 70픽셀로 설정합니다.

p {
padding: 35px 70px;
}

예시

<p> 요소의 패딩을 위쪽은 35픽셀, 오른쪽과 왼쪽은 70픽셀, 아래쪽은 50픽셀로 설정합니다.

p {
padding: 35px 70px 50px;
}

예시

<p> 요소의 패딩을 위쪽은 35픽셀, 오른쪽은 70픽셀, 아래쪽은 50픽셀, 왼쪽은 90픽셀로 설정합니다.

p {
padding: 35px 70px 50px 90px;
}

CSS 참조

CSS Properties