CSS Box Model 완벽 이해 — margin, padding, border의 관계

Box Model이란?

웹 페이지의 모든 HTML 요소는 "상자(Box)"입니다. CSS Box Model은 이 상자가 어떻게 구성되는지를 설명합니다.

안쪽부터 바깥쪽 순서로:

1. Content — 실제 내용 (텍스트, 이미지 등)
2. Padding — 내용과 테두리 사이의 안쪽 여백
3. Border — 테두리
4. Margin — 다른 요소와의 바깥쪽 여백

이 네 가지가 합쳐져서 요소가 차지하는 전체 공간이 결정됩니다.

시각적으로 이해하기

┌────────── margin ──────────┐
│  ┌────── border ──────┐    │
│  │  ┌── padding ──┐   │    │
│  │  │             │   │    │
│  │  │   CONTENT   │   │    │
│  │  │             │   │    │
│  │  └─────────────┘   │    │
│  └────────────────────┘    │
└────────────────────────────┘

개발자 도구(F12)에서 요소를 선택하면 이 Box Model이 시각적으로 표시됩니다. 파란색이 content, 초록색이 padding, 노란색이 border, 주황색이 margin입니다.

Content

요소의 실제 내용 영역입니다. width와 height로 크기를 지정합니다.

.box {
  width: 300px;
  height: 200px;
}

Padding: 안쪽 여백

내용과 테두리 사이의 공간입니다. 배경색이 적용됩니다.

.box {
  padding: 16px;             /* 네 방향 모두 */
  padding: 16px 24px;        /* 상하 16px, 좌우 24px */
  padding: 8px 16px 24px;    /* 위 8, 좌우 16, 아래 24 */
  padding: 8px 16px 24px 32px; /* 위 오른 아래 왼 (시계방향) */

  /* 개별 지정 */
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 24px;
  padding-left: 32px;
}

팁: 버튼을 만들 때 padding이 중요합니다. padding: 12px 32px이면 세로 12px, 가로 32px으로 적당히 넉넉한 클릭 영역이 만들어집니다.

Border: 테두리

.box {
  border: 1px solid #e2e8f0;           /* 두께 스타일 색상 */
  border-radius: 8px;                   /* 둥근 모서리 */
  border-bottom: 2px solid #2dd4bf;     /* 아래쪽만 */
}

border 스타일 종류: solid(실선), dashed(점선), dotted(점), double(이중선), none(없음)

Margin: 바깥 여백

다른 요소와의 거리를 지정합니다. 배경색이 적용되지 않습니다.

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

가운데 정렬 트릭

블록 요소에 width를 주고 margin: 0 auto를 하면 가운데 정렬됩니다.

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

이것이 웹에서 가장 오래되고 가장 많이 쓰이는 가운데 정렬 패턴입니다.

문제: 예상과 다른 크기

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
}
/* 실제 차지하는 너비: 300 + 20 + 20 + 1 + 1 = 342px! */

기본적으로 width는 content만의 너비입니다. padding과 border가 추가되면 실제 크기가 커집니다.

해결: box-sizing: border-box

.box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  border: 1px solid black;
}
/* 실제 차지하는 너비: 300px (padding과 border 포함!) */

border-box를 사용하면 width에 padding과 border가 포함됩니다. 크기 계산이 훨씬 직관적입니다.

전역 설정 (필수)

거의 모든 프로젝트에서 이 코드를 전역으로 넣습니다:

*, *::before, *::after {
  box-sizing: border-box;
}

이제 모든 요소가 border-box로 동작하므로, width를 지정하면 정확히 그 크기가 됩니다.

Margin 병합 (Margin Collapsing)

CSS에서 가장 혼란스러운 개념 중 하나입니다.

세로 방향의 margin이 겹치면 큰 쪽 하나만 적용됩니다.

.box-a { margin-bottom: 30px; }
.box-b { margin-top: 20px; }
/* 둘 사이의 간격: 50px이 아니라 30px! (큰 쪽만 적용) */

Margin 병합이 일어나는 경우

1. 인접 형제 요소의 상하 margin
2. 부모와 첫 번째/마지막 자식의 margin
3. 빈 블록 요소의 상하 margin

병합 방지 방법

/* 방법 1: Flexbox/Grid 사용 (가장 좋음) */
.container {
  display: flex;
  flex-direction: column;
  gap: 24px;  /* margin 대신 gap */
}

/* 방법 2: padding으로 대체 */
.container {
  padding-top: 20px;  /* margin 대신 */
}

/* 방법 3: overflow 설정 */
.container {
  overflow: hidden;  /* 부모-자식 margin 병합 방지 */
}

현대적 해결: Flexbox나 Grid의 gap을 사용하면 margin 병합 문제를 완전히 피할 수 있습니다.

display와 Box Model

요소의 display 속성에 따라 Box Model 동작이 달라집니다.

/* span에 padding을 주고 싶을 때 */
.tag {
  display: inline-block;  /* inline은 상하 padding이 레이아웃에 영향 없음 */
  padding: 4px 12px;
  background: #f0f0f0;
  border-radius: 4px;
}

outline vs border

outline은 Box Model 바깥에 그려지므로 레이아웃에 영향을 주지 않습니다. 포커스 스타일에 주로 사용됩니다.

.btn:focus-visible {
  outline: 2px solid #2dd4bf;
  outline-offset: 2px;  /* 요소와의 간격 */
}

정리

핵심 규칙:

1. box-sizing: border-box 전역 설정
2. 간격은 gap 또는 margin-bottom 단방향으로
3. 가운데 정렬: margin: 0 auto (블록) 또는 Flexbox
4. Margin 병합이 헷갈리면 Flexbox/Grid gap 사용