margin 은 padding과 함께 박스모델을 구성하는 BOX 속성 중 여백의 크기를 나타낸다.

자세히는 박스 요소의 네 방향 바깥 여백 영역을 결정하는데 이때 마진 병합 현상에 대해 글을 정리해보고자 한다.

마진 병합 현상이란?

마진 병합 현상은 요소와 요소 사이, 그리고 부모과 자식 사이에서 발생된다.

요소와 요소 사이

요소와 요소 사이의 마진 병합 현상은 요소와 요소의 margin 값중 더 높은 margin 값이 적용되는 현상이다.

만약 다음과 같은 코드가 있다고 가정해보자.

<div className={styles.parent}>
 	<div className={styles.child}></div>
	<div className={styles.child2}></div>
</div>

.child, .child2 {
    width: 100px; height: 100px;
    border: 1px solid black;
}

위와 같이 block 요소인 div 태그에
width 값과 height 값을 정해준 뒤,
다음과 같이 첫 번째 요소에 margin-bottom: 40px; 을 적용해 보았다.

.child {
    margin-bottom: 40px;
}

첫 번째 요소로부터 40px 이 멀어진 것을 확인할 수 있다.
그 후 다음과 같이 두 번째 요소에 margin-top: 50px 을 적용해 보았다.

.child2 {
    margin-top: 50px;
}

분명 위와 같은 코드를 작성할 때의 기대효과는 총 90px 만큼의 영역이 멀어지는 걸 기대했지만,
마진 병합 현상으로 인해 50px 만 영역을 차지하는 걸 알 수 있다.

부모와 자식 사이

부모와 자식 사이의 마진 병합 현상은 자식 요소의 margin 값이 부모의 높이에 영향을 미치지 않는 현상이다.

다음 코드를 보자.

<div className={styles.parent}>
 	<div className={styles.child}></div>
	<div className={styles.child2}></div>
</div>

.parent {
    background-color: yellow;
}

.child {
    width: 100px; height: 100px;
    background-color: red;
}

여기에 자식 요소에 margin-top: 40px; 의 값을 적용해보자.

.child {
    margin-top: 40px;
}

부모의 높이는 따로 설정해두지 않는다면 자식의 높이만큼 부모의 높이가 지정된다.
하지만 위와 같은 경우는 자식의 margin 값이 부모의 높이에 영향을 미치지 않는다.

마진 병합 현상 조건

좌우가 아닌 상하 간 병합현상이 일어난다.
인접하는 블록요소끼리만 일어난다.

마진 병합 현상 해결

이러한 마진 병합 현상을 해결하는 방법은 다음과 같다.

부모 요소에 overflow

.parent {
	overflow: hidden;
}

부모 요소에 overflow: hidden; 을 적용하면 부모 요소에 새로은 블록 포맷 콘텐츠가 생성되면서 자식 요소와 부모 요소가 각기 다르게 적용될 수 있는 것이다.

부모 요소에 display: inline-block;

.parent {
	display: inline-block;
}

마진 병합 현상의 조건이 블록 요소이기 때문에 inline-block 으로 간단히 해결 가능하다.

부모 요소에 border

.parent {
	border: 1px solid black;
}

엄밀히 말하면 각 요소 간 공간을 차지하고 있는 콘텐츠가 있다면 마진 병합 현상은 일어나지 않는다.
이를 이용해 공간을 차지할 수 있는 border 값을 적용해주면 마진 병합 현상을 간단히 해결할 수 있다.