Properties

Properties

Editing
  • account_tree
  • bug_report

margin

요소의 주변 요소와의 상하좌우 간격을 설정한다.

사용 가능한 값 타입

<'margin'>

DEVDIC-Specified Data Types

margin 속기 속성에 사용되는 타입이다.

요소에게 margin을 적용시 상하좌우 네 방향 동시에 설정이 가능한 값을 갖는 타입이다.

  • CSS Box Model Module Level 3
    <margin>{1,4}

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

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

포함된 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.

  • <margin>

    DEVDIC-Specified Data Types

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

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

      <length-percentage> 타입 또는 auto 키워드로 지정한다.

      margin-left, margin-top, margin-right, margin-bottom 속성에 사용한다.

    Details

    포함된 타입

    • <length-percentage>

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

      • CSS Values and Units Module Level 3
        <length> | <percentage>
      Details

      포함된 타입

      • <length>

        숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.

        • CSS Basic User Interface Module Level 4
          <length>
        Details

        사용되는 단위

        아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.

        • cm

          1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.

        • in

          1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.

        • mm

          1cm의 1/10 값을 나타낸다.

        • pc

          1in의 1/16 값을 나타낸다.

        • pt

          1in의 1/72 값을 나타낸다.

        • px

          스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.

        • Q

          1cm의 1/40을 나타낸다.

        • deg

          보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.

        • grad

          400grad(그라디안)은 완전한 원을 만든다.

        • rad

          2π(라디안)이 완전한 원을 만든다.

        • turn

          1turn(턴)이 완전한 원을 만든다.

        • cap

          대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.

        • ch

          글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.

        • em

          대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.

        • ex

          대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.

        • ic

          한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은  표의 문자 '水'의 너비 또는 높이이다.

        • lh

          요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.

        • rem

          html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.

        • rlh

          html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.

        • Hz

          1초당 발생한 진동수를 나타낸다.

        • kHz

          1000Hz를 나타낸다.

        • fr

          그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.

        • vb

          html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.

        • vh

          뷰포트 높이를 상대적으로 1% 높이를 갖는다.

        • vi

          html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.

        • vmax

          vw 또는 vh 중 큰 값을 나타낸다.

        • vmin

          vw 또는 vh 중 작은 값을 나타낸다.

        • vw

          뷰포트 너비를 상대적으로 1% 폭을 갖는다.

        • dpcm

          1cm당 점(dot)의 수를 나타낸다.

        • dpi

          1in당 점(dot)의 수를 나타낸다.

        • dppx

          1픽셀(pixel)당 점(dot)의 수를 나타낸다.

        • ms

          1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.

        • s

          초를 나타낸다.

      • <percentage>

        어떠한 기준으로 부터 백분율로 표현한다.

    사용되는 키워드

    • auto

      명시적으로 요소가 갖는 공간을 뺀 나머지 공간을 활용하여 User Agent가 margin을 설정한다.

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

  • CSS Box Model Module Level 3

    모든 요소는 margin 속성의 값이 0이다.

  • 명시적으로 요소가 갖는 공간을 뺀 나머지 공간을 활용하여 User Agent가 margin을 설정한다.

구문

  • margin: 40px;
    CSS Box Model Module Level 3
    Example
  • object.style.margin = "10px 20px";
    CSS Box Model Module Level 3

테스트 도구

(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

지원 웹브라우저