CSS Quiz - Margin Collapsion
1. 마진 병합 현상이 무엇인가요? 어떤 조건을 가지고 있어야 마진 병합이 되나요?
- 마진 병합은 여러 블록 요소 중 위쪽과 아래쪽 margin이 경우에 따라 단일 margin으로 결합되는 동작을 말합니다.
- 인접한 형제 요소 간의 margin은 서로 상쇄됩니다.
- 부모와 자식을 분리하는 컨텐츠가 없을 때 부모와 자식의 margin이 서로 상쇄됩니다.
- border, padding, inline 컨텐츠, height, min-height가 없는 빈 블록일 때도 margin이 상쇄됩니다.
2. 마진 병합 현상은 부모 자식 관계에서도 일어나나요?
- 네, 부모 블럭의 border, padding, inline 컨텐츠, block formatting context가 없거나 자식의 border, padding, inline 컨텐츠, height, min-height가 없을 때 마진 병합이 일어납니다.
3. 마진 병합 현상은 어떻게 해결할 수 있나요?
- 요소를 구분할 수 있게 위쪽 블록에 border, padding, inline 컨텐츠를 주거나 아래쪽 블록에 border, padding, inline 컨텐츠, height, min-height 값을 설정함으로써 마진 병합 현상을 해결할 수 있습니다.
- 또한 블록에 float 값을 설정하거나 position을 absolute로 설정하거나 display를 inline-block으로 설정하거나 overflow를 hidden, scroll, auto 중 하나로 설정하여 block formatting context를 형성함으로써 마진 병합 현상을 해결할 수 있습니다.
참고
