Margin 속성

마진 부분의 폭을 지정하는 속성으로, margin-left, margin-right, margin-top, margin-bottom을 이용하면

4 곳의 마진 값을 각각 줄 수 있고, margin 속성을 이용하면 4곳의 마진 값을 동시에 줄 수 있다.

기호 설명

A | B: A 또는 B 중의 하나이다.
[  ]: 일반적인 의미의 괄호이다.
A {1,4}: A가 최소한 1번에서 최대한 4번 들어간다.

margin-left: 길이 | 퍼센트 | auto

왼쪽 마진의 폭을 정한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

초기값은 0이다.

※ 하나의 element가 다른 element를 포함하고 있을 때 부모 element의

특성이 자식 element에도 똑같이 적용되는 경우가 있다. 이를 유전(Inheritance)라고 한다.

Margin 속성의 경우에는 P에 마진 값을 주었어도, P에 포함된 P의 마진값에는 영향을 미치지 않는다는 뜻이다.

• 길이: 상대길이와 절대길이가 있다.
  • 상대길이: em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
  • 절대길이: in(인치), cm(센티미터), mm(밀리미터), pt(포인트: 1pt=1/72in), pc(피카: 1pc=11pt)
• 퍼센트: 부모가 되는(현재의 element가 포함된) element의 폭을 기준으로 한다.
• auto: 브라우저가 자동으로 정한다.

margin-right: 길이 | 퍼센트 | auto

오른쪽 마진의 폭을 정한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

초기값은 0이다.

margin-top: 길이 | 퍼센트 | auto

윗쪽 마진의 폭을 정한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

초기값은 0이다.

margin-bottom: 길이 | 퍼센트 | auto

아랫쪽 마진의 폭을 정한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

초기값은 0이다.

margin: [길이 | 퍼센트 | auto]{1,4}

네 곳의 마진 폭을 동시에 정한다. {1,4}는 최소 한 번에서 최대 4번이 들어간다는 뜻이다.

즉, 길이나 퍼센트나 auto를 1번에서 4번까지 쓸 수 있다는 뜻이다. 네 번을 썼을 때 순서는 top, right, bottom, left이다.

Margin과 같이 여러 개의 속성을 하나로 묶어서 쓰도록 한 속성을

대표속성(Shorthand property)이라고 한다.

모든 element에 적용할 수 있고, 유전되지 않는다.

대표속성에는 초기값이 없다.

BODY { margin: 2em } /* 모든 마진이 2em */
BODY { margin: 1em 2em } /* top과 bottom은 1em, right과 left는 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em (right의 값을 그대로 가져옴) */