박스 모델(Box Model)이란?

박스모델은 웹페이지의 요소를 박스 형태로 구성하고 요소의 크기와 공간배치를 설명하는 CSS의 핵심 개념이다.
모든 HTML요소는 박스 모델에 따라 배치된다.
각 요소는 4가지의 주요 영역으로 구성된다.

---

1.콘텐츠(Content)

요소의 실제 콘텐츠가 표시되는 영역이다.

2.테두리(Border)

박스를 둘러싸는 테두리
스타일, 두께, 곡률, 색상을 지정할수 있다.

3.패딩(Padding)

콘텐츠와 박스의 경계인 Border사이의 내부여백
콘텐츠에 대해 투명하며 색상을 지정할 수 없다.

4.마진(Margin)

박스의 가장 바깥 영역 인접한 요소와의 간격을 정의한다
패딩과 마찬가지로 색상을 지정할 수 없고 투명하다.