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이다.*/