Summary
엘리먼트와 엘리먼트 사이의 간격을 지정.
| 값 | <길이> | <백분율> | auto | inherit |
|---|---|
| 기본값 | 0 |
| 적용대상 | 모든요소 |
| 상속 | 상속안됨 |
| 퍼센테이지 | 용기 블럭의 너비를 참조 |
| 미디어 | Visual |
Value
- 길이 : 고정된 너비를 지정. 음수값 지정 가능
- 백분율 : 용기 블럭의 너비를 참조
- auto : 자동으로 계산된 값을 지정
- inherit : 부모 엘리멘트의 값을 상속
Tip
1. 'margin'은 'margin-top, margin-right, margin-bottom, margin-left'들을 한번에 지정하는 약식 속성이다.
2. 마진을 갖는 박스들이 서로 인접해 있는 경우 수평 마진들은 통합되지 않지만, 수직 마진들은 통합 된다. [sample]
이때 마진이 큰 쪽의 수직 마진쪽으로 통합된다. [sample]
마진은 음수값을 가질 수 있는데, 양수마진과 음수마진을 합산한 만큼의 수직마진을 가질 수 있다.
3. floated된 박스나 절대적 위치 혹은 상대적 위치의 박스의 마진들도 통합되지 않는다.
4. 값의 갯수에 따라 margin이 설정되는 범위
- BODY { margin: 2em }
모든 마진들을 2em으로 설정 - BODY { margin: 1em 2em }
상, 하 = 1em, 좌, 우 = 2em - BODY { margin: 1em 2em 3em }
상=1em, 좌, 우=2em, 하=3em, left=2em
Sample
마진 통합 예제 (github에서 보기)
마진이 큰쪽으로 통합되는 예제 (github에서 보기)
