[CSS] Box Model 완벽 가이드와 마진 병합 현상

이번 포스팅에서는 [CSS 기초] 파트의 세부 주제인 Box Model과 실무 트러블슈팅에 대하여 상세히 알아보겠습니다.

1. 실무 필수 설정: box-sizing: border-box

디폴트 박스 모델인 content-box는 width 지정 후 padding을 주면 요소의 전체 크기가 커지는 문제가 있습니다. 퍼블리싱 시 제일 먼저 설정해야 하는 글로벌 룰입니다.

/* CSS 리셋의 기본: 모든 요소에 border-box 적용하기 */
*, *::before, *::after {
  box-sizing: border-box;
}

2. 마진 병합(Margin Collapsing) 현상 타파하기

인접한 블록 요소의 상하 마진이 만날 때, 두 마진 중 더 큰 값 하나로 합쳐지는 현상입니다. 이로 인해 레이아웃이 예상과 다르게 어그러지는 경우가 잦습니다.

• 해결 노하우 1: 부모 요소에 padding: 1px 이나 border를 살짝 주어 마진의 만남을 차단합니다.
• 해결 노하우 2: 부모 요소에 overflow: hidden (BFC 생성)을 선언하여 병합을 끊어냅니다.
• 해결 노하우 3: Flexbox나 CSS Grid 컨테이너 내부의 아이템들은 마진 병합이 발생하지 않습니다! 최신 레이아웃을 사용하면 자연스레 해결됩니다.

---

지금까지 Box Model과 마진 병합 현상의 개념과 구체적인 활용 방안에 대해 살펴보았습니다. 이어지는 다음 포스팅에서 관련 심화 주제를 지속적으로 다루어보겠습니다.