마진상쇄

[CSS]　마진 상쇄(겹침) 현상 (Margin Collapsing) 해결하기

작성한 코드 및 오류 내역 .itemDesc h1 { font-size: 32px; margin-bottom: 15px; } .itemDesc p { margin: 10px 0; font-size: 14px; color: #737373; } 위 아래로 나란히 있는 h1과 p에게 각각 margin-bottom을 15px, margin top&bottom을 10px씩 부여했다. 그런데 작업한 화면을 검토해보니 코드에 작성한 margin값이 의도대로 적용되지 않고 있었다. 개발자도구로 확인해보니 h1과 p의 margin이 겹쳐져 있는 것을 확인할 수 있었다. 이유는 마진 상쇄(겹침) 현상 때문이었다. 마진 상쇄 현상이란? 마진 상쇄는 어떤 두 개 이상 블록 요소의 위 아래 마진이 겹칠 때, 어느 한쪽의 값만 ..