[CSS] CSS Box Model

🤔 Box Model 이란?

모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.

박스 모델은 HTML 요소를 padding, border, margin, 그리고 content으로 구분한다.

 

CSS에서의 기본적인 Box Model에서는 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다.

따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

 

하나 하나 계산하며 맞추기 어려움을 해결하기 위해선 box-sizing이란 속성을 사용하면 됩니다.

 

📖 box-sizing 속성

content-box

content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.

💡 width : 100px, padding : 0 10px, border : 1px solid black 으로 예시를 들면,
=> 총 122px (width + padding + border)

 

border-box

border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다.

대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.

💡 width : 100px, padding : 0 10px, border : 1px solid black 으로 예시를 들면,
=> 총 100px (width 값을 따라감)