[ CSS 기초] css padding 속성
CSS Padding 속성
padding-top / padding-right / padding-bottom / padding-left
코딩 시 margin과 헷갈리게 되는 padding에 대해서 알아보자!!
☞ Padding 속성
Padding은 내용물(Content : 문단, 그림 등의 화면에 나타나는 Element 들)과 내용물을 담고 있는
상자(Container box)의 테두리(Border)사이의 거리를 지정하는 속성 입니다.
예를 들면 아래와 같이 height:200px, width:200px의 DIV Box(Container box)속에
height:100px, width:100px 의 DIV Box(내용물)가 들어가 있습니다.
[Source code]
<HTML>
<HEAD>
<TITLE>padding</TITLE>
</HEAD>
<BODY>
<DIV style="width:200px; height:200px; background-color:tomato;">
<DIV style="width:100px; height:100px; background-color:gold;"></DIV>
</DIV>
</BODY>
</HTML>
[출력결과]
위의 결과는 padding을 지정하지 않았기 때문에 100px × 100px 의 DIV Box가 200px × 200px의 Box에 틈 없이
붙어 있습니다. DIV Box 의 경우 이렇게 padding을 지정하지 않으면 기본 적인 정렬은 left, top이 됩니다.
[Source code]
<HTML>
<HEAD>
<TITLE>padding:20px</TITLE>
</HEAD>
<BODY>
<DIV style="width:200px; height:200px; background-color:tomato; padding:20px;">
<DIV style="width:100px; height:100px; background-color:gold;"></DIV>
</DIV>
</BODY>
</HTML>
[출력결과]
위와 같이 좌측 20px, 상단 20px 의 padding이 생긴 것으로 나타나지만 실제로는 아래와 같이 200px X 200px Box의
안쪽의 4면(top, right, bottom, left)에 위에서 지정한 20px의 padding이 생겨 있습니다.
[출력결과]
☞ Box 4면에 각각 다른 padding 값 지정하기
padding은 padding-top, padding-right, padding-bottom, padding-left 의 4가지 속성 단축형으로서
한 번에 4면 각각의 Padding 값을 지정하는 속성입니다.
지정하는 순서는 top, right, bottom, left 의 순서로 하면 되겠습니다.
예) top:20px, right:30px, bottom:40px, left:50px
{ padding : 20px 30px 40px 50px ;} /*값과 값 사이를 space로 구분한다.*/
예) 값을 2개만 사용한 경우
{ padding : 20% 50% ;} /*top, bottom 은 20%, right, left는 50%의 padding이 생긴다.*/
위의 경우와 같이 값을 2개만 사용하게 되면
1. 첫 번째 값인 20% 가 top에 지정된다.
2. 두 번째 값인 50% 가 right에 지정된다.
3. bottom의 padding 값은 마주보는 면인 top의 20%가 지정된다.
4. left의 padding 값은 마주보는 면인 right의 50%가 지정된다.
이와 같이 bottom과 left는 padding 값을 지정 받지 못하면 마주보는 면의 padding 값이 지정되게 됩니다.
예) 값을 3개만 사용한 경우
{ padding : 20px 30px 50px ;} /*top 20px, right 30px, bottom 50px left는 30px의 padding이 생긴다.*/
위의 경우와 같이 값을 2개만 사용하게 되면
1. 첫 번째 값인 20px 가 top에 지정된다.
2. 두 번째 값인 30px 가 right에 지정된다.
3. 세 번째 값인 50px 가 bottom에 지정된다.
4. left의 padding 값은 마주보는 면인 right의 30px가 지정된다.
예) 값을 단독적으로 지정할 때
{ padding-top : 20px; } /*Box 상단에 20px의 padding이 생긴다.*/
