박스 모델(Box model & Box sizing)

모든 HTML 태그들은 박스(Box) 형태의 구조를 가지고 있으며, 이를 Box model이라고 한다.

 

Box 내부 구조

1. 실제 내용(Content)을 뜻하는 Content Area
2. 경계선과 실제 내용 사이의 간격(내부 여백)을 뜻하는 padding
3. 경계선 바깥의 여백(바깥 여백)을 뜻하는 Margin

 

*각각 요소의 위치 등 영향을 준다. padding 같은 경우는 크기를 키우면 content area가 작아지기도 한다.