Properties

Properties

Editing
  • account_tree
  • bug_report

padding

요소의 내부 여백을 설정한다.

사용 가능한 값 타입

〈length-percentage〉

<length>와 <percentage> 타입을 나타낸다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • 〈length-percentage〉{1,4}

    <length-percentage> 타입의 최소 1개에서 최대 4개까지 공백으로 구분하여 작성이 가능하며 작성 갯수에 따라 다음과 같이 처리된다.

    • 1개 : 요소의 네 방향 모두 동일한 값으로 여백을 지정한다.
    • 2개 : 첫번째 값은 상하, 두번째 값은 좌우 여백을 지정한다.
    • 3개 : 첫번째 값은 상단, 두번째 값은 좌우, 세번째 값은 하단의 여백을 지정한다.
    • 4개 : 차례대로 요소의 상단부터 시계 방향으로 지정된다. 
  • padding 〈length-percentage〉;CSS1
    padding 테스트
  • padding 〈length-percentage〉 〈length-percentage〉;CSS1

    두 개의 값을 공백으로 구분해 입력하는 경우 차례대로 상하, 좌우 내부 여백을 지정한다.

    공백으로 구분된 두 개의 값으로 padding 테스트
  • padding 〈length-percentage〉 〈length-percentage〉 〈length-percentage〉;CSS1

    세 개의 값을 공백으로 구분해 입력하는 경우 차례대로 상단, 좌우, 하단 내부 여백을 지정한다.

  • padding 〈length-percentage〉 〈length-percentage〉 〈length-percentage〉 〈length-percentage〉;CSS1

    네 개의 값을 공백으로 구분해 입력하는 경우 차례대로 상, 우, 하, 좌 순서(시계 방향)로 내부 여백을 지정한다.

  • object.style.padding = "50px 20px";CSS1

    자바스크립트 형식

테스트 도구

(1) 요소에 대한 단일 값으로 padding 테스트

(2) 요소에 대한 2개 값으로 padding 테스트

(3) 요소에 대한 3개의 값으로 padding 테스트

(4) 요소에 대한 4개의 값으로 padding 테스트

지원 웹브라우저