[CSS] 마진 겹침 (margin collapsing)

본 글에서는 css의 margin collapsing에 대해 알아봅니다.

마진 겹침(margin collapsing) 이란

• 두 개 이상의 마진이 지정된 요소가 인접할 때, 그 마진들이 겹쳐 하나의 마진처럼 합쳐지는 현상을 말합니다.

마진 겹침 발생 조건

1. 부모 요소에 상하 마진이 적용돼있고, 가장 첫번째 자식 혹은 마지막 자식 요소에 상하 마진이 적용된 경우
2. 형제 요소가 위아래로 인접해있고, 상하 마진이 적용돼있는 경우

마진 겹침이 적용된 상황 예시

상황1 - 부모 요소와 마진이 겹친 상황

가로, 세로가 150px인 parent 요소와 50px인 child 요소를 아래와같이 배치하고 싶은 상황을 가정해봅시다.

다음 그림과 같이 margin을 주면 될 것이라 판단하였고, 코드를 작성했습니다.

html 코드:

<div class="parent">
	<div class="child"></div>
</div>

css 코드:

.parent {
	width: 150px;
	height: 150px;
	background-color: orange;

	margin: 50px;
}
.child {
	width: 50px;
	height: 50px;
	background-color: green;

	margin: 100px;
}

그렇게 결과를 확인해봤는데...!

너무나 엉뚱한 결과가 나왔는데요, 부모의 위쪽 마진과 자식의 위쪽 마진이 마진겹침이 일어났기 때문입니다.

상황2 - 형제 요소와 상하 여백이 겹친 상황

이번엔 가로 150px, 세로 300px인 parent 요소와, parent 요소의 자식으로 가로, 세로 50px인 child 요소 2개를 아래와 같이 배치하고 싶은 상황을 가정해봅시다.

다음 그림과 같이 margin을 주면 될 것이라 판단했고, 코드를 작성했습니다.

html 코드:

<div class="parent">
	<div class="child1"></div>
	<div class="child2"></div>
</div>

css 코드:

.parent {
	width: 150px;
	height: 300px;
	background-color: orange;
	margin: 10px;
}
.child1 {
	width: 50px;
	height: 50px;
	background-color: green;
	margin: 50px;
}
.child2 {
	width: 50px;
	height: 50px;
	background-color: darkorchid;
	margin: 50px;
}

하지만 현실은 녹록치 않습니다. 정말 예상치도 못한 결과물이 나왔습니다.

결과 해석:
1. 부모와 초록색 자식의 마진 겹침
2. 초록색 자식과 보라색 자식의 마진 겹침
두 가지 마진 겹침으로 인해 위같은 결과가 나온 것입니다.

마진 겹침 해소 방법

1. 부모 요소와 자식 요소간 마진 겹침이 일어난 경우 다음 방법 중 1가지를 사용해 마진 겹침을 해소할 수 있습니다.

• 부모 요소의 마진이 겹치는 방향에 border를 지정
• 부모 요소의 마진이 겹치는 방향에 padding을 지정
• 부모 요소나 자식 요소에 display: inline-block을 지정

2. 형제 요소간 상하 여백이 겹친 경우 다음 방법 중 1가지를 이용해 해소할 수 있습니다.

• 겹치는 요소 중 하나 이상에 display: inline-block을 지정
• 부모 요소에 display: flex를 지정

형제 요소간 마진 겹침의 경우 border, padding 지정으로는 해소되지 않습니다.

마무리

• 이 포스트를 통해 마진 겹침의 개념과 해결 방법에 대해 알아보았습니다. 마진 겹침에 대해 이해하고 있지 못하다면 원하지 않는 레이아웃 결과가 발생했을 때 엉뚱한 방향으로 해결책을 찾으며 시간 낭비를 하게 될 확률이 높습니다.. 제가 그랬습니다😥
• 여러분이 직면할 수 있는 다양한 레이아웃 문제를 해결하는 데 이 지식이 도움이 되기를 바랍니다.