padding

Summary

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

값	<길이>{1~4} | <백분율> | auto | inherit
기본값	0
적용대상	모든요소
상속	상속안됨
퍼센테이지	용기 블럭의 너비를 참조
미디어	Visual

Value

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

Tip

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

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

   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]

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

Sample