css 마진끼리 겹치는 마진상쇄(margin collapsing) 해결하기

마진상쇄 예시

첫번째 div에는 margin-bottom 20px, 두번째 div에는 margin-top 20px를 줘서 총 40px의 마진이 생겨야하지만 마진상쇄가 일어나 20px밖에 표시가 안됨

See the Pen yLYvYgN by sizzF (@sizzf) on CodePen.

 

display: inline-block; width:100%; 로 해결

See the Pen JjYpYGW by sizzF (@sizzf) on CodePen.