HTML/CSS Margin 속성

마진은 태그 요소와 바깥 요소 간 간격(외부 여백, 패딩은 내부 여백.)을 지정한다. 1개부터 4개까지 값이 올 수 있다. 음수 값도 허용하는데, 음수 값을 적절히 이용하면 재미있는 배치를 표현할 수 있다.

margin을 지정하는 방법은 대략 아래와 같이 정리될 것이다. margin-top, margin-right 식으로 하나 하나 값을 따로 지정할 수도 있다.

1. 하나의 값
margin: 10px;
 top, right, bottom, left 모두 10px.

2. 두개의 값 : 상하-우좌
margin: 10px 5px;
 top, bottom: 10px
 right, left: 5px

3. 세개의 값 : 상-우좌-하
margin: 10px 5px 15px;
 top : 10px
 right, left : 5px
 bottom : 15px

4. 네개의 값 : 상-우-하-좌
margin: 10px 5px 15px 20px;
 top 10px
 right 5px
 left 15px
 bottom 20px

웹 환경에서만 개발하는 사람이라면 margin 값 지정에 별다른 어려움이 없겠지만 WPF 개발을 주로 하고 있어서 개인적으론 항상 헷갈린다.
(WPF에선 margin 적용이 left-top-righ-bottom 순이라 CSS의 top-right-bottom-left 순과 차이가 있다.)