HTML의 모든 요소는 box로 간주할수 있습니다.
CSS에서는 디자인과 레이아웃에 대해 박스 모델이라는 용어를 사용합니다.
CSS 박스 모델은 본질적으로 HTML요소를 감싸는 상자 입니다.
margin, border, padding, content로 구성됩니다.
상자의 크기는 패딩과 테두리를 포함하여 계산해야 합니다.
CSS3에서는 box-sizing 속성을 적용하여 요소크기의 패딩과 테두리를 포함할지 여부를 지정할 수 있습니다.
box-sizing: content-box|border-box|initial|inherit;요소의 크기를 계산하는 방법에 패딩과 테두리를 포함할지 여부를 정의합니다.
| 값 | 설명 |
|---|---|
| content-box | 기본값, 패딩과 테두를 포함하지 않고 width와 height속성값만 으로 요소의 크기를 결정합니다. |
| border-box | width와 height속성에는 패딩과 테두를 포함하여 요소의 크기를 결정합니다. |