CSS: 박스 모델

 

1. 페이지 그리기: 모든 요소는 박스입니다

• HTML 요소는 브라우저 안에서 직사각형 상자(box) 형태로 표현됩니다.
• 이를 이해해야 레이아웃 설계와 정렬을 더 정밀하게 할 수 있습니다.

 

---

2. 박스의 4계층 구조

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

• Content: 텍스트·이미지 등 실제 내용이 위치합니다. width, height로 크기 지정
• Padding: 내용 주변의 안쪽 여백입니다. 배경색이 확장되어 표시됩니다.
• Border: 콘텐츠와 패딩 둘레에 테두리를 추가합니다.
• Margin: 박스 외부의 투명한 여백으로 다른 요소와의 간격을 조정합니다.

 

---

3. 박스 크기 계산 방식

▪ 표준 박스 모델 (content-box, 기본 방식)

• width, height는 콘텐츠 영역만 포함
• 패딩과 테두리는 외부에 추가되어 최종 크기는 늘어납니다.

.box {
  width: 350px;
  height: 150px;
  padding: 25px;
  border: 5px solid black;
}

➡ 실제 너비: 350 + 25*2 + 5*2 = 410px

 

▪ 대체 박스 모델 (border-box)

• width, height는 테두리까지 포함한 전체 박스 크기
• 패딩과 테두리가 내부로 포함되어 계산이 쉽고 예측 가능합니다

/* 위 코드에서 box-sizing: border-box 추가 */
.box {
  /* ... */
  box-sizing: border-box;
}

➡ 실제 너비: 350px로 고정됨

 

위: 표준 박스 모델, 아래: 대체 박스 모델

 

---

4. 디스플레이 유형과 박스 동작

display 유형	특징
block	새 줄에서 시작. width, height, padding, border, margin 모두 적용됨
inline	줄 안에 흐름. width, height 무시, 수평 방향의 패딩·마진·테두리만 적용됨
inline-block	줄 안이지만, width, height 지정 가능. 패딩·테두리·마진 모두 동작

 

---

5. 여백 겹침 (Margin Collapsing)

• 인접한 블록 요소의 마진이 겹치면, 더 큰 값 하나만 적용됩니다.
• 50px 아래 마진 + 30px 위 마진은 → 최종 50px로 처리됩니다.

<div class="container">
  <p class="one">I am paragraph one.</p>
  <p class="two">I am paragraph two.</p>
</div>

.one {
  margin-bottom: 50px;
}

.two {
  margin-top: 30px;
}

여백 겹침 예시

 

---

6. 왜 박스 모델을 알아야 할까?

• 레이아웃 설계에서 요소 크기와 간격을 정확히 계산할 수 있습니다.
• padding, border, margin 조합으로 스타일과 간격 컨트롤이 가능해집니다.
• box-sizing: border-box는 실무에서 일관적인 레이아웃을 위한 표준 방식입니다.
• 브라우저 개발자 도구(DevTools)를 통해 네 개의 박스 단계를 시각적으로 확인하며 디버깅할 수 있습니다.

 

---

7. 요약 정리

• 박스 구성 = 콘텐츠 + 패딩 + 테두리 + 마진
• 표준 모델은 콘텐츠 기준 사이즈 지정, 대체 모델은 박스 전체 크기로 지정
• 박스 유형(block, inline, inline-block)에 따라 스타일 적용 방식이 다릅니다.
• margin collapsing과 DevTools 활용을 통해 정밀한 레이아웃 설계가 가능합니다.

도움이 되셨길 바랍니다 :)

 

출처

박스 모델 - Web 개발 학습하기 | MDN