🔍 분명히 마진을 줬는데 적용이 안 될 때가 있다. 원인을 미리 알아두어 맞닥뜨렸을 때 당황하지 않도록 하자.
margin collapsing
인접한 두 요소에 마진 값을 주었을 때 더 큰 마진 값만이 적용될 때가 있다. 또 자식 요소에 마진 값을 주어도 부모의 높이에는 영향을 미치지 않는 경우도 있다. 마진 병합 현상, 마진 겹침 현상 혹은 여백 상쇄 등으로 다양하게 불리는 이 현상은 우리의 의도와 다르게 마진 값을 다르게 적용해 우리를 당황스럽게 만든다.
1. 인접한 두 요소의 마진값 중 더 큰 마진값을 취하는 경우
div태그에 마진값을 주어 각각이 20px의 마진값을 가지게 되었다. 그러면 우리의 계산으로는 각각의 박스는 위 아래로 40px만큼 떨어져야 할 것이다. 하지만 마진값이 겹쳐 있는 듯이 20px 만큼만 떨어진 것을 확인할 수 있다.
한 쪽이 더 큰 마진값을 가진다면 더 큰 마진값만큼만 떨어져 있는 것을 확인할 수 있다. 결국 위아래 여백은 서로 상쇄되기 때문에 같은 여백이라면 해당 값만큼만, 더 큰값이 있다면 큰 값에 따라 결정되는 것이다.
2. 자식 요소의 마진값이 부모 요소에 영향을 미치지 않는 경우
자식 요소에 준 마진값이 좌우에는 적용되어 여백이 생겼으나 상하로는 적용되지 않은 것을 확인할 수 있다.
마진 병합은 꼭 해결해야 하는 걸까?
마진 병합 현상을 해결하려하기 전에 먼저 생각해보자. 마진 병합은 꼭 해결해야만 하는 현상일까? 나는 아니오. 라고 답하고 싶다. 때에 따라서 해결해야 할 경우가 있겠지만 항상 해결해야만 하는 현상은 아니다.
인접한 두 요소의 마진값을 상쇄하는 것은 오히려 레이아웃 배치에 있어 편리하게 작용한다. 각 요소에 마진값을 줄 때 각각의margin-top,margin-bottom값에 대해 고려 없이 값을 주면 되기 때문이다. 특히 같은 마진값을 경우 보기 좋게 레이아웃이 배치되는 것을 우린 이미 확인했다.
마진 병합을 해결해보자
1. 부모 요소에 overflow: hidden 설정
2. 부모 요소에 border 설정
따로 border를 설정해주기 때문에 border의 두께만큼 면적이 넓어지는 점을 유의해야 한다. 불필요한 CSS 작업이 들어가 좋은 방식은 아닌 것 같다..!
3. 부모 요소에 display: inline-block 설정
4. 자식 요소에 display: inline-block 설정
자식 요소를 inline-block으로 바꾸게 되면 병합되었던 마진값이 각 요소에 따로 적용되게 된다. 위에서 설명한 1번 경우를 따로 해결할 생각이 없다면 사용하지 않아도 되는 방식이다.
사실 마진 병합 현상은 여태 CSS작업을 하며 인지하지 못 하고 넘어간 부분이었다. 마진값을 줄 때는 margin-top, margin-bottom 등으로 한 쪽으로 통일해 값을 주었고, 또 padding을 활용하는 경우가 많았기 때문이다. 이번 기회에 마진 병합 현상에 대해 제대로 이해하고 이를 고려해 CSS 작업을 진행해야겠다.
