CSS Dictionary

by leezche

CSS Dictionary by leezche

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

댓글

오류나 오타 신고 환영합니다. ^^;;
(도와주세요!)

댓글 본문
작성자
비밀번호
버전 관리
리체:leezche
현재 버전
선택 버전
graphittie 자세히 보기