Properties

Properties

Editing
  • account_tree
  • bug_report

margin

요소의 주변 요소와의 간격을 설정한다.

사용 가능한 값 타입

〈margin〉

margin, margin-top, margin-right, margin-bottom, margin-left 속성에 사용 가능한 타입이다.

  • <length-percentage> | auto
    CSS Box Model Module Level 3

    margin-left, margin-top, margin-right, margin-bottom 속성에 사용 가능하다.

  • <length-percentage> | auto{1,4}
    CSS Box Model Module Level 3

    margin 축약 속성에서 1개 이상 최대 4개까지의 값을 공백으로 구분해 작성한다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

구문

  • 〈margin〉{1,4}

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

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

    두 개의 값을 공백으로 구분하여 적용하는 경우에는 차례대로 상하, 좌우 외부 간격을 설정한다.

  • margin 〈margin〉 〈margin〉 〈margin〉;CSS1

    세 개의 값을 공백으로 구분하여 적용하는 경우에는 차례대로 상단, 좌우, 하단 외부 간격을 설정한다.

  • margin 〈margin〉 〈margin〉 〈margin〉 〈margin〉;CSS1

    네 개의 값을 공백으로 구분하여 적용하는 경우에는 차례대로 상, 우, 하, 좌순(시계 방향)으로 외부 간격을 설정한다.

  • object.style.margin = "10px 20px";CSS1

    자바스크립트 형식

테스트 도구

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

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

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

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

버전 명세

Modules
Module NameStatusSummary
CSS Box Model Module Level 3

Last review date: 2022-11-23

지원 웹브라우저