CSS 박스 모델

웹페이지의 모든 요소는 눈에 보이지 않는 네모난 박스로 이루어져 있습니다. 이걸 **박스 모델(Box Model)**이라고 부릅니다. 하나의 박스는 안쪽부터 바깥쪽까지 4개 영역이 겹겹이 쌓인 구조입니다.

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

• content: 글자나 이미지 등 실제 내용이 들어가는 영역
• padding: 내용과 테두리 사이의 안쪽 여백
• border: 박스를 감싸는 테두리
• margin: 다른 박스와의 사이를 벌리는 바깥 여백

박스를 상자에 물건을 담아 포장하는 과정으로 비유하면, content는 물건, padding은 완충재, border는 상자 벽, margin은 상자와 상자 사이에 두는 간격이라고 생각하면 됩니다.

박스의 크기는 width(너비)와 height(높이) 속성으로 직접 지정할 수 있고, padding/margin은 위·아래·좌·우 방향별로 다르게 줄 수 있습니다. 개발자 도구의 Computed 탭에 들어가면 지금 선택한 요소의 박스 모델 4개 영역이 실제로 몇 px인지 그림으로 확인할 수 있습니다.

참고: 개인 Notion 학습 노트