CSS - 마진 상쇄(Margin-top 적용 불가)

마진 상쇄는 무엇인가?

마진 중첩, 겹침으로도 이해하면 좋다. 두 개 이상의 블록 요소의 상하 마진이 겹칠 때(중첩될 때), 각각의 margin이 따로 적용 되는 것이 아니라 어느 한 쪽의 값만 적용 되는 것이다.

마진 상쇄가 일어나는 건 언제인가?

1. 인접한(두 개가 위아래로 붙어 있을 때) 형제 요소로 있을 때
   

.first-child {margin-bottom : 30px;}
.second-child { margin-top : 20px;}

위의 이미지와 코드처럼 인접한 형제가 있고 각각 상하에 마진 값을 주면 형제 요소 사이의 margin은 총 50px이 아니라, 마진 상쇄에 의해 30px이 된다.

🔴 단, 인접한 형제 태그가 서로 다르다면 마진 상쇄는 일어나지 않는다.
p와 div로 인접한 경우.

2. 부모, 자식 태그로 이루어져 있을 때

   부모와 자식 태그 사이에 padding, border와 같이 경계를 구분하는 것이 없다면 first-child와 last-child에 마진 상쇄가 일어난다.

3. 빈 요소와 겹쳐져 있을 때
   빈 요소란?
   => height, padding, border 처럼 위 아래로의 경계를 짓는 속성이 없는 것을 말한다.

빈 요소와 인접한 요소들의 상단 margin, 하단 margin 값을 비교하여 더 큰 쪽으로 마진 상쇄가 일어난다.

해결 방법

문제가 되는 요소들에 padding, border, height 값을 줘서 경계를 구분해주면 된다.

아래의 블로그에서 정말 너무나도 상세히 정리해주셨다... 고마워요
https://velog.io/@raram2/CSS-%EB%A7%88%EC%A7%84-%EC%83%81%EC%87%84Margin-collapsing-%EC%9B%90%EB%A6%AC-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4