CSS padding 속성

정의와 사용법

padding 간추린 속성은 하나의 선언에 모든 내간격 속성을 설정합니다.

설명

이 간추린 속성은 요소의 모든 내간격 너비를 설정하거나 각 면의 내간격 너비를 설정합니다. 행간 비대체 요소에 설정된 내간격은 행높이 계산에 영향을 미치지 않으므로, 요소가 내간격과 배경을 모두 가지고 있으면 시각적으로 다른 행으로 확장될 수 있으며, 다른 내용과 겹칠 수도 있습니다. 요소의 배경은 내간격를 통해 확장됩니다. 부정적인 내간격 값을 지정할 수 없습니다.

주석:부정적인 값을 사용할 수 없습니다.

예제 1

padding:10px 5px 15px 20px;
  • 위쪽 내간격은 10px입니다
  • 오른쪽 내간격은 5px입니다
  • 아래쪽 내간격은 15px입니다
  • 왼쪽 내간격은 20px입니다

예제 2

padding:10px 5px 15px;
  • 위쪽 내간격은 10px입니다
  • 오른쪽 내간격과 왼쪽 내간격은 5px입니다
  • 아래쪽 내간격은 15px입니다

예제 3

padding:10px 5px;
  • 위쪽 내간격과 아래쪽 내간격은 10px입니다
  • 오른쪽 내간격과 왼쪽 내간격은 5px입니다

예제 4

padding:10px;
  • 모든 4개 내간격는 10px입니다

다른 것도 참조하세요:

CSS 강의:CSS 내간격

HTML DOM 참조 매뉴얼:padding 속성

예제

p 요소의 4개 내간격을 설정합니다:

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

개인적으로 시도해 보세요

CSS 문법

padding: length|initial|inherit;

속성 값

값 설명
auto 브라우저가 내간격을 계산합니다.
length 정확한 단위로 계산된 내간격 값을 정의합니다. 예를 들어, 픽셀, 센티미터 등. 기본 값은 0px입니다.
% 부모 요소의 너비를 백분율로 나타낸 내간격을 정의합니다.
inherit 부모 요소에서 내간격을 상속해야 합니다.

기술 세부 사항

기본 값: 0
상속성: no
버전: CSS1
JavaScript 문법: object.style.padding="10px 5px"

TIY 예제

모든 내간격 속성을 하나의 선언에
이 예제에서는 간추린 속성을 사용하여 모든 내간격 속성을 하나의 선언에 설정할 수 있으며, 하나에서 네 개의 값이 있을 수 있습니다.

브라우저 지원

표에 나타낸 숫자는 이 속성을 최초로 지원하는 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5