Box Model

개념 설명

HTML 요소가 브라우저에서 차지하는 공간을 구성하는 4개 영역의 중첩 구조.

핵심 포인트

• 구성 순서: Content → Padding → Border → Margin (안쪽에서 바깥쪽)
• box-sizing: content-box(기본) vs border-box(padding+border 포함)
• Margin Collapsing: 인접한 블록 요소의 마진이 합쳐짐
• Padding은 요소 내부 영역, Margin은 외부 영역
• width/height는 box-sizing 설정에 따라 계산 방식이 달라짐

예시 코드

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