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에 포함된 SPAN의 마진값에는 영향을 미치지 않는다는 뜻이다.
- 길이 : 상대길이와 절대길이가 있다.
- 상대길이 : em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
- 절대길이 : in(인치), cm(센티미터), mm(밀리미터), pt(포인트 : 1pt=1/72in), pc(피카 : 1pc=12pt)
- 퍼센트 : 부모가 되는(현재의 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의 값을 그대로 가져옴) */
◀ ■ ▶