[CSS]마진 겹침 현상(margin collapsing)

 

퍼블 하면서 종종 겪은 문제인데

적당히 바쁘다는 핑계로 흐린눈 하고 지나가던 지난 날들..

이 참에 블로그 작성 과제에 흥미로운 주제가 있어서 작성해본다.

 

 

 

Margin은 요소 사이에 간격을 주고 싶을 때 쓴다.

그래서 적절한 마진 값을 주면 알아서 잘 떨어질 거라고 생각하지만

잘 적용되지 않는 경우가 있다. 

이럴 때는 우선 block이나 inline요소인지 확인하고 display를 block요소로 바꿔주면 해결!

될 때도 있지만 가장 애매모호하고 알 수 없는 문제는..

분명 margin값이 잘 안들어갈 이유가 없어보이는데도 원하는 양만큼 적용이 안되어 있을 때...

 

마진 겹침 현상(margin collapsing)

그래서 이 마진 겹침 현상은 요소사이에 margin-top나 margin-bottom이 겹칠 경우 더 높은 마진 값이 적용되는 경우를 말한다. 부모요소안에 자식요소에 margin값을 넣어도 그 부모요소의 높이를 margin값 만큼 영향을 주는 것이 아닌, 그냥 부모요소 높이를 넘겨버리는 것!!

 

See the Pen Untitled by yunmee0704 (@yunmee0704) on CodePen.

위의 경우처럼, 빨간색 박스 사방에 마진값을 주었으므로 회색 박스와 빨간색 위나 아래에도 마진값이 적용되어야 하는데, 빨간색 박스 사이만 마진 적용이 되었다. 요게 바로 마진 겹침 현상.

 

See the Pen Untitled by yunmee0704 (@yunmee0704) on CodePen.

그렇다고 무조건 이 마진겹침현상이 나쁘지만은 않다.

이렇게 형제요소들끼리 고루고루 margin값을 주고 싶을 때는 너무 편리함.

margin:20px;을 설정하면 우리 생각에는 위아래가 각각 20px씩 들어가니까 첫번째박스와 두번째 박스 사이는 40px이 될 것 같지만 자동적으로 일관성 있는 디자인을 만들기에 도움을 준다.

 

 

그럼 이런 마진겹침현상을 어떻게 해결하는가...하면

 

💡 부모요소에 overflow:hidden

첫번째의 경우 마진값이 부모 요소를 넘어가 버리므로 발생하는 문제이니까

아예 overflow:hidden으로 넘치는 것을 막아주고, 자식요소가 그 안에서 있도록 한다.

See the Pen Untitled by yunmee0704 (@yunmee0704) on CodePen.

💡 부모요소에 display:inline-block;

부모요소가 인라인과 블록요소 두가지 특성을 가지면서 자식 요소의 마진값을 살릴 수 있음. 

다만 부모요소가 전체영역을 차지해야하는 경우는 조금 불편한;

 

See the Pen Untitled by yunmee0704 (@yunmee0704) on CodePen.

💡 그 외에 해결 방법(조금 공수가 들어가지만..)

1.부모요소에 padding값을 주기 : 마진겹침이 일어나지 않으므로 자식의 위아래 마진값을 0으로 조절해야함.

2.부모요소에 border값을 주기 : 무의지만 border값이 생겨서 코드가 길어짐.

3.자식요소마다 display:inline-block 사용하기 : 1번과 마찬가지로 자식요소의 간격 조정이 필요함.