마진병합현상의 조건
- 인접해있는 Block요소끼리만 일어납니다.
- 상하단만 해당 됩니다.
- 레이아웃을 더 보기 좋게 하기 위한 좋은 기능이다.
- 하지만 원하는 바와 다르게 적용 될 수도 있다.
마진병합을 방지하는 방법
- 부모에 margin이 0 auto여서 wrapper와 자식의 마진이 사라졌을 경우
- 부모에 padding: 1px을 줍니다.
- 부모에 border: 1px solid transperent;를 줍니다.
- display: inline-block;로 바꿉니다. Block 요소가 아니기 때문에 마진병합이 사라집니다. 하지만 자식간의 상하단 마진이 커집니다. 자식간의 마진 병합도 방지 되기 때문입니다.
- 부모에 overflow: hidden; 속성을 줍니다(가장 좋은 해결책)
