박스 모델 — margin, padding, border 완전 정복

모든 HTML 요소는 '박스'다

웹 페이지를 만들다 보면 "왜 이 요소가 저기 있지?", "왜 간격이 이상하지?" 같은 문제를 자주 겪습니다. 이 문제의 80%는 박스 모델(Box Model) 을 이해하면 해결됩니다.

CSS에서 모든 HTML 요소는 사각형 박스로 취급됩니다.

박스 모델의 4개 층

┌─────────────────────────────────┐
│           margin (바깥 여백)      │
│  ┌───────────────────────────┐  │
│  │       border (테두리)      │  │
│  │  ┌─────────────────────┐  │  │
│  │  │    padding (안 여백)  │  │  │
│  │  │  ┌───────────────┐  │  │  │
│  │  │  │   content     │  │  │  │
│  │  │  │  (실제 내용)   │  │  │  │
│  │  │  └───────────────┘  │  │  │
│  │  └─────────────────────┘  │  │
│  └───────────────────────────┘  │
└─────────────────────────────────┘

층	역할
content	텍스트, 이미지 등 실제 내용
padding	내용과 테두리 사이 안쪽 여백
border	테두리 선
margin	이 요소와 다른 요소 사이 바깥 여백

padding — 안쪽 여백

.box {
  padding: 20px;             /* 네 방향 모두 20px */
  padding: 10px 20px;        /* 위아래 10px, 좌우 20px */
  padding: 10px 20px 15px 5px; /* 위 오른쪽 아래 왼쪽 (시계 방향) */
}

/* 방향별로 따로 설정 */
.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

padding은 배경색이 적용됩니다. 텍스트와 테두리 사이에 숨 쉴 공간을 만들어줍니다.

/* 버튼에 padding을 주면 클릭 영역이 넓어집니다 */
button {
  padding: 10px 24px;
  background-color: #0070f3;
  color: white;
  border: none;
  border-radius: 6px;
}

margin — 바깥 여백

.card {
  margin: 20px;              /* 네 방향 모두 20px */
  margin: 0 auto;            /* 위아래 0, 좌우 자동 → 가운데 정렬! */
  margin-bottom: 32px;       /* 아래쪽만 32px */
}

`margin: 0 auto` — 블록 요소 가운데 정렬

.container {
  width: 800px;
  margin: 0 auto;   /* 남은 좌우 공간을 반반 나눠 가운데 정렬 */
}

이 패턴은 페이지 콘텐츠를 가운데 정렬할 때 매우 자주 씁니다.

마진 겹침 (Margin Collapsing)

세로 방향으로 인접한 두 요소의 margin은 겹칩니다.

.box1 { margin-bottom: 20px; }
.box2 { margin-top: 30px; }
/* 실제 간격: 50px이 아니라 30px (더 큰 쪽만 적용) */

border — 테두리

.box {
  border: 2px solid #333;       /* 굵기 스타일 색상 */
  border: 1px dashed #ccc;      /* 점선 */
  border: 3px dotted red;       /* 도트 선 */
}

/* 방향별 테두리 */
.underline-only {
  border-bottom: 2px solid #0070f3;
}

/* 둥근 테두리 */
.card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;    /* 모서리 둥글게 */
}

.circle {
  border-radius: 50%;    /* 완전 원형 */
}

box-sizing — 크기 계산 방식

박스 모델에서 가장 헷갈리는 부분입니다.

/* 기본값: content-box */
.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* 실제 차지하는 너비: 200 + 20*2 + 2*2 = 244px */
}

width: 200px을 줬는데 실제로는 244px을 차지합니다. 계산이 복잡하죠.

`border-box`로 해결

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  /* 실제 차지하는 너비: 정확히 200px! */
  /* content 너비가 자동으로 줄어듦 */
}

border-box는 padding과 border를 width 안에 포함시킵니다. 훨씬 직관적입니다.

모든 요소에 적용하기 (권장)

* {
  box-sizing: border-box;
}

거의 모든 프로젝트에서 이 한 줄을 가장 먼저 씁니다.

실전 예시: 카드 컴포넌트

* {
  box-sizing: border-box;
}

.card {
  width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;         /* 둥근 모서리 밖으로 삐져나오지 않게 */
  margin-bottom: 24px;
}

.card-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.card-body {
  padding: 16px 20px 20px;
}

.card-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.card-text {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

개발자 도구로 박스 모델 확인하기

브라우저에서 요소를 우클릭 → 검사(Inspect) → Elements 탭 아래쪽에 박스 모델 시각화가 나타납니다.

주황색: margin
녹색: padding
파란색: content

실제 개발에서 레이아웃이 이상할 때 여기서 확인하면 바로 원인을 찾을 수 있습니다.

직접 해보기 ✏️

<div class="container">
  <div class="card">
    <h2>카드 제목</h2>
    <p>카드 설명 텍스트입니다.</p>
    <button>자세히 보기</button>
  </div>
  <div class="card">
    <h2>두 번째 카드</h2>
    <p>두 번째 카드 내용입니다.</p>
    <button>자세히 보기</button>
  </div>
</div>

목표:

* { box-sizing: border-box; } 를 가장 먼저 적용
.container 는 너비 800px, 가운데 정렬
.card 는 padding 20px, border 1px, border-radius 8px, margin-bottom 20px
button 은 padding 8px 16px, 배경색, 둥근 모서리

정리

속성	역할
`padding`	내용과 테두리 사이 안쪽 여백
`margin`	요소 바깥쪽 여백
`margin: 0 auto`	블록 요소 가운데 정렬
`border`	테두리 선
`border-radius`	모서리 둥글게
`box-sizing: border-box`	width에 padding·border 포함

다음 편에서는 현대 웹 레이아웃의 핵심인 Flexbox 를 배웁니다.