웹페이지를 구성하는 모든 요소는 보이지 않더라도 보이지 않는 상자(Box) 형태로 존재합니다.
바로 이 개념이 **CSS Box Model(박스 모델)**입니다.
이 글에서는 비전공자도 이해할 수 있도록 박스 모델의 구성 요소, 작동 방식, 마진과 패딩의 차이, 실전 예제를 통해 쉽고 명확하게 정리해 드리겠습니다.
✅ 박스 모델(Box Model)이란?
CSS 박스 모델은 웹페이지의 모든 요소를 하나의 사각형 상자로 보고,
그 상자에 여백(margin), 테두리(border), 패딩(padding), **내용(content)**이 어떻게 쌓이는지를 설명하는 모델입니다.
즉, 텍스트 하나, 버튼 하나, 이미지 하나도 모두 보이지 않는 박스로 구성되어 있으며,
이 박스의 크기와 간격을 조절하는 것이 웹 레이아웃의 핵심입니다.
✅ Box Model 구성 요소 4가지
| Content | 실제 콘텐츠 영역 (텍스트, 이미지 등) |
| Padding | 콘텐츠와 테두리 사이의 안쪽 여백 |
| Border | 요소를 감싸는 테두리 |
| Margin | 요소 바깥쪽의 공간 (다른 요소와의 거리) |
내부 → 외부 순서로 쌓입니다:
[margin] → [border] → [padding] → [content]
✅ 기본 예제 코드로 이해하기
📌 코드 설명:
- width: 300px; → 콘텐츠 영역의 너비
- padding: 20px; → 콘텐츠 내부 여백
- border: 5px solid → 테두리 두께
- margin: 30px auto; → 바깥 여백 (세로 30px, 좌우 가운데 정렬)
이 박스의 총 너비는:
300px (content) + 20px2 (padding) + 5px2 (border) = 350px
✅ 마진(Margin)과 패딩(Padding)의 차이점
| 위치 | 내부 여백 (콘텐츠와 테두리 사이) | 외부 여백 (요소와 다른 요소 사이) |
| 배경색 | 배경색 적용됨 | 배경색 적용되지 않음 |
| 공간 영향 | 요소 크기에 포함됨 (box-sizing 설정에 따라 다름) | 요소 크기와는 별개로 동작 |
✅ box-sizing 속성으로 모델 제어하기
기본적으로 padding과 border는 요소 크기에 더해지지만,
이를 제어하려면 box-sizing 속성을 사용합니다.
- content-box (기본값): width/height에 padding과 border가 포함되지 않음
- border-box: padding과 border를 width/height 안에 포함
실무에서는 border-box를 사용하는 것이 일반적이며,
전체 스타일 초기화 시 많이 사용됩니다.
✅ 실전 팁: 박스 간격 조절은 margin으로
여러 박스를 나란히 배치하거나 간격을 조절할 때는 보통 margin을 사용합니다.
또는 가로 간격은 margin-right, margin-left로 설정합니다.
✅ Box Model 디버깅 방법
브라우저의 개발자 도구(F12)를 열고,
요소를 선택하면 Box Model 구조를 시각적으로 확인할 수 있습니다.
크롬 기준으로는 Computed 탭 → Box Model 도식에서
margin, border, padding, content를 확인할 수 있습니다.
마무리: 박스 모델을 이해하면 레이아웃이 쉬워진다
웹페이지는 텍스트나 이미지처럼 보이지만,
실제로는 **보이지 않는 상자들(Box)**로 정렬된 구조입니다.
이 구조를 이해하면 CSS 레이아웃 문제의 80%는 해결할 수 있으며,
앞으로 배우게 될 Flexbox, Grid, Position 속성 등도 훨씬 쉽게 이해할 수 있습니다.
박스 모델은 CSS의 핵심 중의 핵심입니다.
오늘 배운 내용을 바탕으로, 자신만의 레이아웃을 구성해보며 감각을 익혀보세요.