padding 값 적용하기 > TIP & TECH | ▒ 인-베스트™ ▒ ver.2012

CSS padding 값 적용하기

작성자 IN-BEST 댓글 0건 조회 10,405회 작성일 12-11-06 05:22

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

양반은 물에 빠져도 개헤엄 안 치고, 선비는 얼어 죽어도 곁불 안 쬔다 !! 나는 나 ^^ 주접 떨지않고, 당당하게 살다 ... 간다 ~

등록된 댓글이 없습니다.