css를 쓰다 보니,
Block 타입 요소 간의 margin이 겹치는 경우가 있다.
/* html */
<div class="margin_collapse">
<div class="block_box">Block</div>
<div class="block_box">Block</div>
<div class="block_box">Block</div>
</div>
/* css */
.block_box {
width: 100px;
height: 100px;
margin: 50px;
border: 1px solid #000;
text-align: center;
}위와 같이, 세 개의 div 요소에 margin 값을 똑같이 50px로 주었는데 결과를 보면
margin의 범위가 합쳐져 100px이 아닌 50px만큼 떨어져 있는 것을 확인할 수 있다.
이 현상을 마진 병합(margin collapsing)이라고 한다.
Block 타입 요소들이 수직 방향으로 배치될 때 발생하는데
상위 요소와 하위 요소의 margin이 겹칠 경우, 둘 중 더 큰 값만 적용되고 작은 값은 무시된다.
특징
1) 수직 방향일 때만 발생한다.
2) 오직 인접한 요소들 사이에서 발생한다.
-</br>태그가 요소 사이에 끼어있다면 보이지 않더라도 병합이 발생하지 않는다.
3) 두 margin 사이에 border, padding, inline 컨텐츠, height, min-height, max-height 중 하나라도 존재한다면 발생하지 않는다.
같은 방식으로 부모 요소에 위의 컨텐츠가 단 하나라도 없는 경우, 부모의
margin과 자식의margin이 병합되고 병합된 여백은 부모 요소 바깥에 위치한다.
<style>
p {
margin-top: 48px;
margin-bottom: 48px;
}
</style>
<div>
<p>Paragraph One</p>
</div>
<p>Paragraph Two</p>
5) 같은 방향의 margin끼리도 병합될 수 있다.
<style>
.parent {
margin-top: 72px;
}
.child {
margin-top: 24px;
}
</style>
<div class="parent">
<p class="child">Paragraph One</p>
</div>
6) 3개 이상의 margin 도 병합될 수 있다.
7) 음수 margin이 병합될 때는 절대값이 더 큰 값만 적용된다.
8) 만약 음수와 양수 margin이 병합된다면 서로 상쇄된 값이 남는다.
