Box Model

박스 모델(box model)

모든 html요소는 박스 모양으로 구성되며, 이것을 박스 모델이라 한다.

박스 모델은 html요소를 padding, border, margin, content로 구분한다.

 

• content : 텍스트나 이미지 박스의 실질적 내용이 있다.
• padding : content와 border의 간격. 즉, content의 내부여백.
• border : content를 감싸는 영역.
• margin : border와 이웃하는 요소의 가이 간격. 즉 content의 외부여백.

 

📦 Box-sizing

Box Model에서 너비와 높이는 요소 컨텐츠 박스 크기에 적용된다.

박스에 안쪽 여백에 따라 사이즈가 변경되는데 이를 해결하기 위해 box-sizing이란 속성을 사용한다.

 

content-box

요소 너비를 100px로 설정하면 콘텐츠 영역이 100픽셀 너비를 가지고 테두리와 안쪽 여백은 이에 더해진다.

 

border-box

테두리와 안쪽 여백의 크기도 요소의 크기로 고려한다. 너비를 100px로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100픽셀을 유지한다. 대부분 이 편이 크기를 조절할 때 쉽다.