CSS) margin collapsing 마진 병합 현상

✅참고 동영상링크 

https://www.youtube.com/watch?v=c19Mjg-ivxc&t=94s 

---

✅margin collapsing(마진 겹침, 마진 병합현상)

 

➡️ margin 병합현상 조건

1. 인접해있는 Block 요소끼리만 일어남

2. 상하단만 해당사항(좌우는 X)

 

 

1)형제요소의 마진병합 현상

코드펜에서 아래와 같이 코드를 작성했다.

div 박스에 margin값을 상하좌우 모두 20px을 주었다. 

그러면 베이지색 박스의 margin-bottom:20px 과

핑크색 박스의 margin-top:20px 이 만나서 40px이 되어야하는게 아닐까?

했지만..

빨간색 빗금친 부분처럼 20px만 보여지고 있다...

이것이 바로 마진겹침현상!

- 왜 이런현상이 일어나지...?

의도된 부분이다. CSS가 어떤 문서를 좀더 안정적인 디자인으로 보기 편하게 하기위한 목적이다. 

마진이 40px이었다면 우리는 20px로 만들기 위해 일부러 수정을 했을것이다. 

하지만 CSS 자체에서 이미 margin을 겹치게끔 설계를 해놔서 우리가 편하게 작업할수있다. 

 

결론 : 마진병합현상은 고쳐야할 문제점이 아니다.! 이로운 것이다. 

But, 언제나 이로운것은 아니다. 고쳐야할 수 있음!

부모-자식간의 마진 병합현상일때 고쳐야해

 

2) 부모-자식간의 마진 병합현상

부모요소인 하얀색 박스에 margin값을 0을 줬는데

밑 결과 빨간색으로 표시해놓은 공간처럼. margin상,하 값이 50px이 들어가있다.

 

왜...? children 즉 자식요소에 들어간 margin:50px값이 왜 부모요소에 적용된걸까...?

마진병합현상때문에!!

원래는 H모양이 나와야하는게 아니라 8모양이 나와야한다.

 

마진병합현상이 적용된 결과

➡️ 어떻게 해결할까..?

공간을 차지하고 있는 어떤요소가 위치하게된다면

margin병합현상은 일어날수없음. 왜냐하면. 인접해있는 block요소끼리만 일어난다고 했는데

부모와 자식이 인접해있지않기 때문에 그럼!

 

보통은

1) 부모요소에 padding:1px; 과 같이 공간을 차지하고있는 요소를 넣음으로써 부모와 자식간의 관계를 격리시킨다.

2) border: 1px solid transparent; 

 

그런데 이러한 해결방법은 근본적인 해결방법보다는 margin병합현상이 일어나지 않게 하는 방법을 써서 하는 거지!

근본적인 해결방법이라고 할 수없음. 공간을 차지하는 요소를 넣기때문에 의도된 디자인이랑 멀어질 수 있음.

 

➡️ 또다른 해결책은..?

마진 병합현상이 일어나는 조건은 인접해있는 block끼리니까

children이 display:inline-block;이면 되지!

 

단점: 부모랑 거리를 두게 해줬는데..inline-block이 되면서

형제요소끼리도...떨어지게되었어.디자인적으로 별로 예쁘지않음

➡️ 근본적인 해결책은..?

부모요소에 overflow:hidden;을 넣어본다.