8-4-3. CSS 속성 : Content 와 Border 사이의 여백(Padding){padding-top / right / bottom / left: ... ;}

8-4-3. CSS 속성 : Content 와 Border 사이의 여백(Padding)

 

 가. padding 속성

 

  - 박스모델의 'content 영역'과 'border 영역' 사의 여백이 padding

  - 이 padding 영역의 크기를 조절하는 속성

  - 기본값 : 0

 

 나. padding 관련 속성의 종류

  

  ■ padding-top : content 영역의 위쪽 여백의 크기를 지정

  ■ padding-right : content 영역의 오른쪽 여백의 크기를 지정

  ■ padding-bottom : content 영역의 아래쪽 여백의 크기를 지정

  ■ padding-left : content 영역의 왼쪽 여백의 크기를 지정

 

  ▣ 단위 형태의 속성값 : px / em / % ...

   - 단, margin과 달리 음수 입력 불가

   - 구하고자 하는 %의 산출 값은 상하좌우 상관없이, 이를 위한 기준 값은 '무조건' 'width 값'

 

1  div{width: 100px; height: 200px; padding: 10%;}                                     ↓  ※ padding의 산출 값은 10px(= width 100px * 10%)

 

다. padding 속성의 축약

 

  - 위 여러 padding 관련 속성을 축약하여 하나의 코드로 입력할 수 있음

  - 단, 축약시 선언 순서에 맞춰야 함

 

[padding 속성 축약 선언순서]  속성값이 1개인 경우 :  div{padding: [여백 '상하우좌' 값]  속성값이 2개인 경우 :  div{padding: [여백 '상하' 값] [여백 '우좌' 값]  속성값이 3개인 경우 :  div{padding: [여백 '상' 값] [여백 '우좌' 값] [여백 '하' 값]  속성값이 4개인 경우 :  div{padding: [여백 '상' 값] [여백 '우' 값] [여백 '하' 값] [여백 '좌' 값]