padding

Summary

엘리먼트의 상, 하, 좌, 우 여백을 한꺼번에 지정합니다.

Value

• 길이 : 고정된 너비를 지정 ('10px', '1em' 등 ). 음수값은 지정할 수 없다.
• 백분율 : 용기블럭의 너비를 참조한다.
• auto : 자동으로 계산된 값을 지정
• inherit : 부모 엘리멘트의 값을 상속

Tip

1. 다음의 두 소스코드는 같은 화면을 보여줍니다.

   ?

   1 2 3 4 5 6

   p { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }

   ?

   1 2 3

   p { padding: 10px 20px 30px 40px; }

2. 값의 갯수에 따라 padding이 설정되는 범위
   • DIV { padding: 2em }
     상,하,좌,우 모든 마진들을 2em으로 설정
   • DIV { padding: 1em 2em }
     상, 하 = 1em, 좌, 우 = 2em
   • DIV { padding: 1em 2em 3em }
     상=1em, 좌, 우=2em, 하=3em
   • DIV { padding: 1em 2em 3em 4em }
     상=1em, 우=2em, 하=3em, 좌=4em
3. padding 영역의 색상 또는 이미지는 엘리먼트의 'background' 속성으로 지정한다. [sample]
   ?

   1 2 3

   <h1 style="background: lightgray; padding: 1em 2em;"> CSS Dictionary </h1>