마진병합

마진병합이란 부모와 자식 혹은 자식간에 서로 마진이 겹치면서 하나만 적용되는 현상을 일컫는다.

이는 버그가 아니라 애초에 의도된 것이다.

자식과 자식간의 간격이 일정하길 바라기 때문에 위의 자식과 아래에 있는 자식 사이에 마진은 하나만 적용되는 것이 자연스러우나 부모와 자식간의 마진은 우리가 원하는 바가 아니라서 당황스러울 때가 많다.

의도된 마진병합 현상이 발생하는 조건은 아래 2가지를 충족했을 때이며 의도하지 않은 마진병합이라면 이 조건을 피해감으로써 해결할 수 있다.

마진병합현상이 발생하는 조건

1) 서로 block 요소일 것

2) 서로 간의 마진 사이에 경계를 지을만한 요소가 하나도 없을 것

마진 병합 해결방안

[해결1] 안보이는 어떤 요소를 만들어준다.

padding: 1px;, border: 1px solid transparent 등 눈에 보이지 않는 요소를 만들어주는 꼼수다.

그러나 이는 의도와 맞지 않는 불필요한 코드를 생성하게 되므로 유지보수에 좋지 않다.

[해결2] 부모요소를 inline 혹은 inline-block으로 바꾸면 해결

마진병합은 block요소 간에 생기는 것이므로 이 역시도 조건을 회피하지만 의도하지 않게 요소의 성질을 바꿔야 한다.

[해결3] 부모요소에 overflow: hidden 적용

overflow자체가 새로운 문서를 생성하는 의미가 되어 경계가 생긴 것이 된다.