개발지식

마진 상쇄(마진 병합)와 해결

weaklion 2023. 5. 14. 15:21

퍼블리싱 작업을 하다 보면 div 같은 블록 레벨의 태그를 상당히 많이 쓰게 됩니다

그리고 필연적으로 마진 상쇄에 부딪히게 되죠. 마진 상쇄란 말 그대로 마진이 상쇄돼 가장 큰 마진으로 결합되는 현상을 말합니다.

수직으로 마진을 적용할 때에 일어나며 주로 아래와 같은 3가지 상황에 일어나게 됩니다. 

  • 두 요소가 상하로 인접한 경우 : 위 요소와 아래 요소의 마진중 가장 높은 값으로 병합
  • 부모 요소의 첫 번째 자식 또는 마지막 자식 요소
    • 첫 번째 자식 : 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진이 병합
    • 마지막 자식 : 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진이 병합
  • 내용이 없는 빈 요소의 경우  : 해당 요소의 상단 마진과 하단 마진 중 가장 높은 값으로 병합

꼭 마진이 존재해서 적용되는 건 아닙니다. 마진이 0이라도 적용되었지만 보이지 않아 적용이 안 되는 것처럼 보이는 것뿐이죠.

 

어쨌든 위와 같은 마진 상쇄는 실무에서 생각보다 자주 일어나는 현상이며, 해결책을 모르면 꽤나 난감한 경우가 많습니다.

임시로 높은 마진 값을 적용한다고 해도 나중에 어떤 사이드 이펙트가 일어날지 모르니까 말이죠.

또는 해결하다고 absolute 포지션을 남발하기도 합니다. absolute는 꼭 필요한 상황이 아니라면 남발하지 않는 게 좋습니다.

그렇다면 마진 상쇄에 대한 간단한 해결책은 뭘까요? 의외로 간단합니다.

  1. 부모 요소에 display : flex를 적용
  2. display: inline-block을 적용
  3. padding을 이용

    첫 번째 방법은 두 박스를 감싼 부모 요소의 display를 flex로 적용하는 겁니다. flex-direction : column까지 이용한다면 상하로 보이던 콘텐츠도 우리가 원하던 결과를 볼 수 있게 됩니다.

 

두 번째 방법으론 display에 inline-block을 적용하는 겁니다. 이 방법도 형태를 유지하면서 마진 상쇄를 없앨 수 있는 좋은 방법이기도 합니다.

 

세 번째는 margin이 아닌 padding을 이용하는 겁니다. 이것 역시 좋은 방법이기는 하지만, 애초부터 margin을 써야 하는 상황은 padding을 쓰지 못해 어쩔 수 없이 margin을 써야 하는 상황이 대부분이죠.

이런 상황에선 첫 번째 두 번째 방법으로 마진상쇄를 해결하는 걸 추천합니다. 그게 아니라면 padding을 쓰는 건 가장 좋은 선택지가 될 수도 있습니다.