CSS 과제를 하면서 신기한 현상을 경험했다. 아래 사진의 노란색 부분이 바로 그 문제의 공간이다.
코드를 살펴보면 이미지나 div에 margin을 준 적이 없는데 두 구역 사이에 공간이 생기는 것을 발견하였다.
개발자 도구로 확인해봤더니 h1태그에 margin이 존재하는 것을 알 수 있었다. 이 margin은 'user agent stylesheet'로 브라우저가 기본적으로 적용해놓은 스타일이다. 하지만 난 여기서 의문이 생겼다.
❓ 아니? 근데...
h1태그는 갈색 박스 안에 자식 요소인데? 그럼 갈색 박스와 Fox 사이에 공간이 생겨야 하는 거 아니야?
나는 단순히 margin이 있으면 무조건 여백이 생기는 줄 알았다. 하지만 우리의 CSS는 그렇게 호락호락하지 않았고, 결국 멘토님께 질문한 결과 마진 병합 현상이라는 것을 알 수 있었다.
마진병합 현상❓
마진병합 현상은 인접한 블록요소의 상하단 마진이 겹치는 현상을 말하는데, 이 친구... 까다롭게도 조건이 있다.
- 인접한 block요소 끼리만
- 상하 마진에서만 발생
그렇다. 내가 했던 과제에서도 h1요소가 상하 마진을 갖고 있었고, 갈색 박스와 h1요소는 block 요소이기 때문에 이러한 현상이 일어난 것이다.
마진병합 현상은 인접한 형제요소 간에도 발생하지만, 인접한 부모자식 요소 간에도 발생한다. 그렇기에 갈색 박스와 h1요소의 마진이 겹치는 상황이 발생하였고, 부모 요소인 갈색 박스는 상단 마진이 없으므로 h1요소의 margin 크기 만큼 노란색 공간이 생긴 것이다.
❗️인접한 block요소의 상하 마진 중 더 큰 마진으로 병합된다.
마진병합 현상은 왜 존재할까?
CSS에서 디자인적으로 의도된 현상이라고 한다. margin이 병합되지 않고 더해진다면 디자인적으로도 일정하지 않고, 보기 좋은 디자인을 위해 마진값을 계산해서 의도적으로 줘야 한다. 즉, 불편함을 해소해주고 보기 편한 결과를 제공해준다. 물론 생각한 결과와 달라서 곤란할수도 있다. 그렇기에 해결 방법도 존재한다.
해결방법
1. 부모 요소에 padding이나 border 또는 컨텐츠를!
아래 사진처럼 두 요소 간에 컨텐츠를 넣거나, 부모 요소에 padding 또는 border를 지정해 줌으로써 마진 병합 현상을 해결할 수 있다. 하지만 이 방법은 불필요한 콘텐츠나 속성이 생기기 때문에 좋은 방법이라고 할 수 없다.
2. 자식 요소를 inline-block으로 변경
마진 병합 현상의 조건이 인접한 block 요소이므로 block 요소를 없애줌으로써 해결할 수 있는 방법이다.
자식 요소인 h1을 inline-block 요소로 변경해주면 노란색 공간이 사라지고 갈색 박스와 Fox 사이에 여백이 생긴 것을 확인할 수 있다.
3. 부모 요소에 overflow:hidden나 display:flow-root를 준다.
부모 요소인 갈색 박스에 overflow: hidden 속성을 주면 마진 병합 현상을 해결할 수 있다. 이 방법은 부모 요소에 새로운 BFC(block formatting context) 만듦으로써 인접한 부모 요소와 자식 요소라는 조건이 깨지게 되고 마진 병합 현상도 사라지는 것이다.
가장 추천되는 방법이며 익스플로러 환경을 고려하지 않는다면 최근에는 display: flow-root라는 속성으로도 해결할 수 있다.
앞으로 시도해볼 것
👉🏻 Block Formatting Context에 대해 좀 더 자세히 알아보고 관련 글을 따로 포스팅 하고싶다.
