Collapsing margin?
마진 상쇄 혹은 마진 겹침 현상이라고도 불리는데 쉽게 말해 어떤 두개 이상 블록 요소의 상하 마진이 겹칠 때 어느 한 쪽의 값만 적용하는 브라우저 나름의 랜더링 규칙 정도로 이해하면 된다. block 1,2가 있고 block 1에는 margin-bottom: 30 을 block 2에는 margin-top: 30을 주었으면 block 1,2에 간격이 60으로 벌어져 있어햐 하지만 30인 경우이다.
더욱 자세하게 마진 상쇄가 나오는 경우를 살피자면?
1. 인접 형제 block 간 상하 마진이 겹칠 때
겹쳐진 두 마진 값을 비교해, 더 큰 마진 값으로 상쇄해 랜더링 해버림. 만약 겹쳐진 두값이 동일할 경우, 중복을 상쇄해 랜더링 ex) block 1,2가 있고 block 1에 margin-bottom: 30 block 2에 margin-top: 40을 주면 큰 40값으로 상쇄해 랜더링
2. 부모 block, 자식 block
부모, 자식 둘 중의 한 block에서 margin을 제외한 박스 모델의 구성요소가 아무것도 존재하지 않을 경우 마진 겹침 현상 나타남. ex) 부모에 margin: 20을 주었고 자식에 margin: 30, border 값을 주었으면 상쇄되어 부모에 margin값이 적용이 안된다.
3. 빈 블록이 있는 경우
웹사이트를 제작하다 보면 빈 공간을 만들기 위해 빈 블록을 자주 사용한다. 빈 블록에 hegiht, min-height, padding, border 값이 없으면 빈 블록 과 인접한 블록 간에 margin 중 큰 값으로 상쇄 값이 같으면 같은 값으로 상쇄되어진다. ex) 빈 블록에 margin:100 인접한 컨텐츠 블록에 margin 50을 주었으면 컨텐츠 블록에 margin top이 50이 된것을 확인 할 수 있다.
마진 상쇄 규칙 예외
다음과 같은 상황에서는 인접 요소 간 마진 상쇄가 일어나지 않는다.
position: absolute, float: left/right, display: flex, display: grid정리!
결국 margin으로만 간격을 컨트롤 하기 보다는 padding 값도 적절히 사용하여 margin 상쇄가 안일어나게끔 하자. 허나 레이아웃을 짤 때 이 마진 상쇄를 유의하면서 짜기에는 너무 생각할게 많다고 생각한다. 중간에 확인할 때 마진 상쇄가 일어났으면 이거 때문이구나 하고 그 때 내가 원하는 레이아웃으로 컨트롤 해야겠다는 생각을 하는게 더 좋을 것 같다.
