1. margin

---

• margin 속성은 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정한다. 이러한 마진 영역은 패딩 영역과는 달리 background-color 속성으로 설정하는 배경색의 영향을 받지 않는다.

• 음수 값을 지정할 수 있다.

2. margin 속성

---

1) margin-top

• 윗쪽의 마진(margin) 값을 설정한다.

div.mar {
    margin-top: 50px;
}

2) margin-right

• 오른쪽의 마진(margin) 값을 설정한다.

div.mar {
    margin-right: 50px;
}

3) margin-bottom

• 아래쪽의 마진(margin) 값을 설정한다.

div.mar {
    margin-bottom: 50px;
}

4) margin-left

• 왼쪽의 마진(margin) 값을 설정함.

div.mar {
    margin-left: 50px;
}

5) inherit

---

• margin 속성값을 inherit으로 설정하면, 부모(parent) 요소의 margin 속성값을 그대로 물려받는다.

div {
    background-color: #7FFFD4;
    border: 2px solid teal;
}

div.parent {
    height: 100px;
    margin-left: 100px;
}

div.child {
    background-color: #FFF8DC;
    margin-left: inherit;
}

6) auto

---

• margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다. 즉, 해당 HTML 요소의 왼쪽과 오른쪽 마진을 자동으로 설정하게 된다. 그 결과 해당 요소는 그 요소를 포함하고 있는 부모(parent) 요소의 정중앙에 위치하게 된다.

div {
    border: 2px solid black;
    width: 350px;
    margin: auto;
}

3. margin 축약 표현

---

• 모든 margin 속성을 이용한 스타일을 한 줄에 설정할 수 있다. 4개의 margin 속성값을 가질 때는 top, right, bottom, left 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.four {
    margin: 10px 20px 30px 40px;
}

div.four {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

• 3개의 margin 속성값을 가질 때는 top, right와 left, bottom 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.three {
    margin: 10px 20px 30px;
}

div.three {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 20px;
}

• 2개의 margin 속성값을 가질 때는 top과 bottom, right와 left 순으로 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.two {
    margin: 10px 20px;
}

div.two {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    margin-left: 20px;
}

• 1개의 margin 속성값을 가질 때는 모든 마진값을 같게 설정한다.

/* 아래 2개의 코드는 같은 결과가 나온다. */
div.one {
    margin: 10px;
}

div.one {
    margin-top: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
}