HTML 문서의 모든 요소는 브라우저에 의해 하나의 직사각형 박스(rectangular box)로 렌더링됩니다. 각 요소가 차지하는 공간은 너비(width), 높이(height), 안쪽 여백(padding), 바깥 여백(margin)에 의해 결정되며, 이러한 구조를 통칭하여 박스 모델(Box Model)이라고 부릅니다.
박스 모델은 CSS 레이아웃의 가장 기본이 되는 개념으로, 요소의 크기 조절과 배치, 요소 간 간격 계산 등 웹 페이지 디자인의 거의 모든 작업에 영향을 미칩니다.
출처: w3.org
박스 모델의 4가지 구성 요소
1. 콘텐츠(Content)
콘텐츠 영역은 실제 데이터가 표시되는 공간입니다. 텍스트, 이미지, 동영상 등 다양한 미디어 콘텐츠가 여기에 포함됩니다. CSS의 width와 height 속성을 사용하면 이 박스의 크기를 자유롭게 조절할 수 있습니다.
2. 패딩(Padding)
패딩은 콘텐츠의 바깥 경계선과 테두리(border) 사이의 내부 여백을 의미합니다. padding 속성으로 전체 여백을 지정할 수 있으며, padding-left, padding-bottom처럼 방향별 속성을 활용하면 원하는 면만 따로 조정하는 것도 가능합니다.
3. 테두리(Border)
테두리는 패딩의 바깥 경계선과 마진의 안쪽 경계선 사이에 위치하는 선입니다. 기본값은 두께 0이며, border 속성을 사용해 두께, 스타일, 색상을 지정할 수 있습니다. 필요하다면 특정 면만 선택적으로 스타일링하는 것도 가능합니다.
4. 마진(Margin)
마진은 해당 요소의 박스와 주변 요소의 박스 사이에 있는 외부 여백입니다. 책이나 문서에서 본문과 페이지 가장자리 사이의 여백과 비슷한 개념이라고 생각하면 이해하기 쉽습니다.
마진은 색상이 투명하며, 패딩과 유사하게 동작하지만 요소의 테두리 바깥쪽 공간을 확보한다는 점이 다릅니다. 패딩과 마찬가지로 margin-top, margin-right 등 방향별 속성으로 개별 설정이 가능합니다.
예제 1: 박스 모델 시각화하기
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: solid;
}
#demo {
margin: auto;
width: 50%;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px mediumvioletred;
box-sizing: border-box;
}
#demo div {
padding: 2em;
box-shadow: inset 0 0 9px orange;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 각 요소의 콘텐츠, 패딩, 테두리, 마진 영역이 윤곽선(outline)으로 표시되어 박스 모델 구조를 한눈에 확인할 수 있습니다.
예제 2: 테두리와 패딩 응용하기
<!DOCTYPE html>
<html>
<head>
<style>
body * {
outline: thin dotted;
}
#demo {
margin: auto;
width: 120px;
height: 120px;
padding: 1em;
border: 1px outset;
display: flex;
box-shadow: inset 0 0 15px indianred;
}
#demo div {
width: 40px;
height: 40px;
}
div:nth-child(odd) {
border: inset lightgreen;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
}
div:nth-child(even) {
border: inset lightblue;
padding: 0.5em;
}
</style>
</head>
<body>
<div id="demo">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>실행 결과
이번 예제에서는 홀수 번째 자식 요소에는 초록색 테두리와 둥근 모서리를, 짝수 번째 자식 요소에는 파란색 테두리와 패딩을 적용했습니다. 이처럼 박스 모델의 각 구성 요소를 조합하면 다양한 형태의 UI를 만들 수 있습니다.
마무리
CSS 박스 모델은 콘텐츠 → 패딩 → 테두리 → 마진 순서로 겹겹이 쌓인 구조입니다. 이 네 가지 요소의 역할과 상호작용을 정확히 이해하면 요소의 크기 계산 오류를 줄이고, 더욱 정교하고 일관된 레이아웃을 구현할 수 있습니다. 특히 box-sizing: border-box 속성을 함께 활용하면 패딩과 테두리가 포함된 크기 계산이 가능해져 반응형 레이아웃 작업이 한결 수월해집니다.