이번에는 Padding의 자세한 사용법과 용도에 대해 써보겠습니다.

Padding은 의미상 패드를 생각하시면 됩니다만 안쪽 여백이라고 생각하시는게 훨씬 더 접근하기에 쉬울것입니다.
DIV라던지 하는 개체에서 안쪽 여백을 주지않으면 컨텐츠와 테두리가 딱 붙어 여유롭지 못하게 됩니다. 그래서 padding을 사용하게 되는데요.

선언 방법은 여러가지가 있습니다.

1. padding
2. padding-top
3. padding-bottom
4. padding-right
5. padding-left

이렇게 5가지가 있습니다.
차이점으로는 padding은 상하좌우의 모든 값을 정할 수 있고 padding-top 과같이 위치가 같이 붙어있는것은 특정 부분만 따로 지정할 수 있다는겁니다. 때에 따라서 잘 선정하여 사용한다면 코딩시 양이 줄어들 수 있습니다.

padding의 예를 볼까요?

.divobject {padding:10px}

이와 같은 경우는 Class명이 divobject인 개체의 padding을 상하좌우 모두 10픽셀로 하라는 뜻입니다.

그럼 아래의 예제는 무슨 뜻일까요?

.divobject {padding:10px 5px}

이와 같은 경우는 Class명이 divobject인 개체의 padding을 top과 bottom은 10픽셀로 left와 right는 5픽셀로 하라는 뜻입니다.

어떻게 그렇게 되는걸까요?
padding은 그 값으로 4가지를 가질 수 있습니다. 아래와 같이요 :)

padding:<top> <right> <bottom> <left>

그럼 이제 답이 나오죠!? 정답~!
4방향을 모두 지정할 수 있습니다.

예를들어 Top 10, Right 15, Bottom 20, Left 25픽셀을 주고싶다면?

padding:10px 15px 20px 25px

위와 같이 선언을 해주면 됩니다.

개별적으로 되는 padding-top과 같은것으로 작성한다면 무척 길어지겠지요..

padding-top:10px;padding-right:15px;padding-bottom:20px;padding-left:25px

이것과 저 위의 padding을 이용한것 어떤게 더 깔끔할까요?

하지만 처음 padding을 사용한 예제에서는 padding:10px 5px 만 했는데 top와 bottom이 10픽셀, left와 right가 5픽셀이 되었지요?
이런것처럼 2개만 선언이 되었을때는 앞의 10px는 Vertical(수직) Padding 뒤의 5px은 Horizontal(수평) Padding으로 선언되어 각각 "상하"와 "좌우"를 뜻하게 됩니다.

그렇다면!! 아래와같이 3개를 한다면??

padding:10px 5px 20px

뭐 정답은 간단하지요, 첫번째는 Top, 두번째 5px을 선언했는데 가장 뒤의 Left값이 없으니 5px은 Horizontal Padding값으로 그리고 세번째의 Bottom은 20px로 적용이 되게 됩니다 :)

이상 간단히 Padding을 알아보았습니다.

요점정리!!

• Padding: <top> <right> <bottom> <left>
• Padding: <Vertical> <Horizontal>
• Padding-top, Padding-bottom, Padding-right, Padding-left 의 개별 Padding