1. 마진 병합이란?

인접한 block 요소애 margin-bottom과 margin-top 속성을 적용할 경우,
두 속성 중 큰 속성값이 작은 속성값을 병합하는 현상. 좌우로는 병합하지 않음.

1. 형제간의 margin collapsing

첫번째 박스에는 margin-bottom: 30px;을, 두번째 박스에는 margin-top: 60px;을 주었다.
두 박스 사이에는 30 + 60 = 90px의 margin이 적용 되어야 하지만, 마진 병합현상으로 인해 둘 중 더 큰 속성값인 60px로 병합되었다.

---

2. 부모와 자식간의 margin collapsing

2-1. 마진 병합이 일어나기 전

자식 요소에 margin 50px을 주어 부모 요소안에서 상하좌우 중앙 정렬을 하고싶다.

2-2. 마진 병합이 일어난 후

좌우는 중앙 정렬이 되었지만, 자식 요소에 설정된 margin-top 속성이 부모 요소와 병합되었다.

2-3. 해결 방법

overflow: hidden

• overflow:hidden은 넓이와 높이가 설정되지 않으면 자식요소를 포함하여 보여줌
• 부모요소에 고정된 height나 width속성이 있을 경우 넘치는 자식요소의 넘친 부분을 보이지 않게 하고, 그렇지 않은 경우 넘치는 자식요소를 포함하도록 크기를 늘린다.

---

3. 그 외 예시

3-1. 부모의 margin이 자식의 margin보다 큰 경우

더 큰 margin 값을 가진 부모에게 병합된다.
좌우 margin은 병합되지 않고 더해진다.

3-2. 자식의 margin이 부모의 margin보다 큰 경우

더 큰 margin 값을 가진 자식에게 병합된다.
좌우 margin은 병합되지 않고 더해진다.

부모, 자식 요소와 상관없이 더 큰 margin 값으로 병합되는 걸 알 수있다.