Padding 속성

패딩 부분의 폭을 지정하는 속성으로, padding-left, padding-right, padding-top, padding-bottom을 이용하면 4 곳의 패딩 값을 각각 줄 수 있고, padding 속성을 이용하면 4곳의 패딩 값을 동시에 줄 수 있다.

기호 설명

A | B : A 또는 B 중의 하나이다.
[  ] : 일반적인 의미의 괄호이다.
A {1,4} : A가 최소한 1번에서 최대한 4번 들어간다.
padding-left : 길이 | 퍼센트

왼쪽 패딩의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 0이다.

padding-right : 길이 | 퍼센트

오른쪽 패딩의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 0이다.

padding-top : 길이 | 퍼센트

윗쪽 패딩의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 0이다.

padding-bottom : 길이 | 퍼센트

아랫쪽 패딩의 폭을 정한다.
모든 element에 적용할 수 있고, 유전되지 않는다.
초기값은 0이다.

padding : [길이 | 퍼센트]{1,4}

네 곳의 패딩 폭을 동시에 정한다. {1,4}는 최소 한 번에서 최대 4번이 들어간다는 뜻이다. 즉, 길이나 퍼센트를 1번에서 4번까지 쓸 수 있다는 뜻이다. 네 번을 썼을 때 순서는 top, right, bottom, left이다.
모든 element에 적용할 수 있고, 유전되지 않는다.
대표속성에는 초기값이 없다.
H1 { background: white; padding: 1em 2em; } 
/*H1의 배경색은 흰 색이고, 상하 패딩 폭은 1em, 좌우 패딩 폭은 2em이다.*/