박스 모델

브라우저는 모든 요소를 사각형 박스로 계산합니다. 이 박스가 어떻게 구성되고, 크기가 어떻게 결정되며, 다른 요소와 어떻게 배치되는지를 이해하면 레이아웃이 훨씬 예측 가능해집니다.

학습 목표

• content, padding, border, margin의 역할을 구분한다.
• box-sizing으로 크기 계산 방식을 바꾼다.
• display의 block, inline, inline-block 차이를 안다.
• 마진 병합 현상을 이해하고 대응한다.

박스의 네 영역

박스는 안쪽부터 바깥쪽으로 네 영역으로 구성됩니다.

• content: 실제 내용이 들어가는 영역
• padding: 내용과 테두리 사이의 안쪽 여백
• border: 테두리
• margin: 다른 요소와의 바깥 여백

.card {
  width: 200px;
  padding: 16px;
  border: 2px solid #ddd;
  margin: 24px;
}

padding과 margin 축약

값을 여러 개 쓰면 방향이 한 번에 지정됩니다.

.box {
  padding: 10px;            /* 사방 10px */
  padding: 10px 20px;       /* 상하 10, 좌우 20 */
  padding: 10px 20px 30px;  /* 상 10, 좌우 20, 하 30 */
  padding: 10px 20px 30px 40px; /* 상 우 하 좌 */
}

값 개수	적용 순서
1개	상하좌우
2개	상하 / 좌우
3개	상 / 좌우 / 하
4개	상 / 우 / 하 / 좌 (시계 방향)

box-sizing

기본값인 content-box에서는 width가 내용 영역만 의미하므로, padding과 border가 더해져 실제 박스가 커집니다. border-box로 바꾸면 width가 테두리까지 포함한 전체 너비가 됩니다.

.a {
  box-sizing: content-box; /* 기본 */
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* 실제 너비 = 200 + 40 + 10 = 250px */
}

.b {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid;
  /* 실제 너비 = 200px 그대로 */
}

💡 TIP — 대부분의 프로젝트는 시작할 때 모든 요소에 box-sizing: border-box를 적용합니다. 크기 계산이 직관적이 되기 때문입니다.

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

display

display는 요소가 어떻게 배치되는지를 정합니다.

.block   { display: block; }        /* 한 줄 전체 차지, 너비/높이 지정 가능 */
.inline  { display: inline; }       /* 줄 안에서 흐름, 너비/높이 무시 */
.ib      { display: inline-block; } /* 줄 안에 있으면서 너비/높이 지정 가능 */

값	줄바꿈	width/height	대표 태그
block	있음	적용됨	div, p, section
inline	없음	무시	span, a, strong
inline-block	없음	적용됨	버튼형 요소

마진 병합

세로로 인접한 두 블록 요소의 위·아래 마진은 합쳐지지 않고 더 큰 값 하나로 병합됩니다.

.top    { margin-bottom: 30px; }
.bottom { margin-top: 20px; }
/* 두 요소 사이 간격은 50px이 아니라 30px */

⚠️ 주의 — 마진 병합은 가로 방향에서는 일어나지 않고, 부모-자식 사이에서도 발생할 수 있습니다. 의도치 않은 간격이 생기면 padding을 쓰거나 부모에 overflow: hidden, Flexbox/Grid를 쓰면 병합이 사라집니다.

요약

• 박스는 content, padding, border, margin으로 구성됩니다.
• box-sizing: border-box를 쓰면 width가 전체 너비가 되어 계산이 쉽습니다.
• display로 block/inline/inline-block 배치 방식을 정합니다.
• 세로 인접 마진은 큰 값 하나로 병합됩니다.

연습문제

1. 너비 300px, 안쪽 여백 20px, 테두리 2px인 박스가 화면에서 정확히 300px 너비를 갖게 하려면 무엇을 지정해야 할까요?
2. span 요소에 너비 100px와 높이 40px를 주고 싶습니다. 어떤 display 값이 필요할까요?
3. padding: 12px 24px;는 어느 방향에 각각 얼마를 적용할까요?
4. 위 요소의 margin-bottom이 40px, 아래 요소의 margin-top이 30px일 때 둘 사이 간격은?

힌트 — box-sizing의 두 값 차이, inline은 크기 지정이 안 된다는 점, 마진 병합은 큰 값 하나입니다.