마진 겹침 현상

마진 겹침 현상

마진 겹치는 것 때문에 해커톤에서 깊은 빡침을 경험하는 경우가 드물지 않음... 진짜진짜 ( 아니!! 나는 마진을 줬는데에 8ㅅ8 왜 적용이 안되냐고...)

진짜 몇번 빡침을 경험하다 보니까 무작정 덤비는 것 보다 좀 알고 이게 왜 내 말을 안듣는건지 먼저 아는게 중요하다는 것을 알게 되었다.

1. 두개의 엘리먼트의 마진이 겹칠 경우 더 큰 값이 적용이 된다.

어떤 경우에 어떤게 도움이 될까? 만약에 리스트라는 것이 있고, 리스트의 스타일에 margin을 50px 적용을 한다면 중간 li밑에 나오는 li의 마진이 100이 되는 경우 때문에 이런 속성을 만들어 놨다고 생각

2. 부모 엘리먼트와 자식 엘리먼트가 있고, 두가지의 엘리먼트가 겹칠 경우

부모 엘리먼트가 시각적으로 보이지 않는 상태가 될 때 부모 엘리먼트의 마진 값과, 자식 엘리먼트의 마진 값 중에 큰 쪽의 마진 값이 자식 엘리먼트의 마진 값/ 자식 엘리먼트의 위치 값으로 사용이 된다.

그렇기 때문에 부모의 마진 값이 10픽셀이고 자식의 마진 값이 5 일경우 부모를 눈에 보이게 하지 않으면 마진 값이 합쳐져서 15 픽셀이 될 것 같지만 

실제로 반영은 10픽셀이 된다. 

3. 두개의 엘리먼트가 같은 레벨을 가지고 있고 한개의 엘리먼트의 시각적인 요소가 없을 경우

시각적인 요소가 없는 엘리먼트의 margin-top, margin-bottom중에 더 큰 값을 가지고 있는 것이 총 margin값이 된다.

아무튼 정리하자면

두 엘리먼트의 마진이 겹쳤을 때 둘 중 더 큰 값이 최종 마진값을 결정