개발자로 살아가기

코스 전체목록

닫기

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

댓글

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

댓글 본문
  1. 짜증나
    저기요 padding: auto 없는데요????????????????
  2. css공부
    안녕하세요. em과 관련하여 질문있습니다. em은 parents elements 의 값에 따라 크기가 결정되는 것으로 알고 있는데, 그렇다면 em의 값을 변경하는 parents에 해당되는 elements는 무엇을 의미하는 건가요?
    예를 들어
    <style>
    .red-box {
    background-color: red;
    margin: 20px 40px 20px 40px;
    padding: 1.5em;
    }
    </style>

    이 경우 padding 값은 margin 값을 반영하나요? 아니면 style에 포함되는 다른 class 의 값을 반영하는 건가요?
  3. 푸른하늘
    11일차 공부 감사합니다
  4. 이주형
    감사합니다~! 리체님! ^_^
버전 관리
리체
현재 버전
선택 버전
graphittie 자세히 보기