Summary
엘리먼트의 상, 하, 좌, 우 여백을 한꺼번에 지정합니다.
값 | <길이>{1~4} | <백분율> | auto | inherit |
---|---|
기본값 | 0 |
적용대상 | 모든요소 |
상속 | 상속안됨 |
퍼센테이지 | 용기 블럭의 너비를 참조 |
미디어 | Visual |
Value
- 길이 : 고정된 너비를 지정 ('10px', '1em' 등 ). 음수값은 지정할 수 없다.
- 백분율 : 용기블럭의 너비를 참조한다.
- auto : 자동으로 계산된 값을 지정
- inherit : 부모 엘리멘트의 값을 상속
Tip
-
다음의 두 소스코드는 같은 화면을 보여줍니다.
p { padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; }
p { padding: 10px 20px 30px 40px; }
- 값의 갯수에 따라 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
- DIV { padding: 2em }
- padding 영역의 색상 또는 이미지는 엘리먼트의 'background' 속성으로 지정한다. [sample]
<h1 style="background: lightgray; padding: 1em 2em;"> CSS Dictionary </h1>