다음 중 마진 병합이 발생하지 않는 상황은?... | CSS

CSS - 문제 미리보기

문제 1126

medium

다음 중 마진 병합이 발생하지 않는 상황은?

A. ```css .box1 { margin-bottom: 20px; } .box2 { margin-top: 30px; } ```

B. ```css .box1 { margin-right: 20px; } .box2 { margin-left: 30px; } ```

C. ```css .parent { margin-bottom: 15px; } .child { margin-top: 25px; } ```

D. ```css p { margin-bottom: 10px; } h2 { margin-top: 20px; } ```

정답: B

마진 병합은 세로 방향(위아래)에서만 발생하므로, 가로 방향 마진은 항상 더해집니다. 각 상황 분석: 2번 (정답) - 가로 방향: ```css .box1 { margin-right: 20px; } /* 오른쪽 마진 */ .box2 { margin-left: 30px; } /* 왼쪽 마진 */ ``` • 결과: 20px + 30px = 50px 간격 (더해짐) • 이유: 좌우 마진은 병합되지 않음 ✓ 다른 선택지들 - 세로 방향 (모두 병합됨): 1번: 인접한 요소들의 세로 마진 → 30px로 병합 3번: 부모-자식 간 세로 마진 → 25px로 병합 4번: 다른 요소들의 세로 마진 → 20px로 병합

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.