[CSS] 마진 상쇄 (Margin collapsing) 현상 이해하기
1. 마진 상쇄란? Block 요소들의 상하 마진이 겹칠 때, 한 쪽의 마진 값만 적용하는 렌더링 규칙 2. 마진 상쇄가 일어나는 3가지 상황 1) 인접 형제간 겹침 마진이 더 큰 값 (≥) 으로 랜더링이 일어난다. 2) 빈 요소의 상하 마진간 겸침 빈 요소란? block 요소의 height이 0인 경우를 말함 height, padding, border 상하로 늘어나는 프로퍼티 값이 없는 경우 내부에 inline 컨텐츠가 없는 경우 빈 요소 + 인접 박스들 간에 마진 겹침이 연쇄적으로 일어나는 경우, 상쇄가 여러번 일어난다. 마크업을 진행할 때, 빈 요소를 만들어놓는 상황이 있으니 꼭 인지해두자. 빠른 레이아웃 구성을 위해, div로 영역을 구분할 경우 나중에 append 하기 위해 빈 컨테이너를 만들어..
