Box model - content box 와 borderbox 정리

박스는 콘텐츠영역, 패딩영역, 보더, 마진영역으로 크게 나뉜다.

 

 

 

전체 넓이를 지정해줬을때는 콘텐츠영역 + 패딩영역 + 보더영역까지만의 길이가 계산된다 (마진값은 들어가지 않음)

 

 

 

 

 

왼쪽의 그림과 오른쪽 그림에는 width값, height값, padding값, border값이 동일하게 주어졌지만

실제로 크롬에서 확인을 해보면 왼쪽모델은 콘텐츠 값만 300이고 오른쪽모델은 보더값(5+5) + 패딩값(15+15) 이 빠진  260이 된 것을 알 수 있다. (300-10-30 = 260)

 

둘의 차이점은 바로 box-sizing에 border-box를 주었다는 것이다. 디폴트값인 content-box 대신 border-box를 주게 되면 보더+패딩+콘텐츠 영역이 합쳐진 값이 자동으로 계산되어 나온다.

 

쉽지만 헷갈리는 부분이기 때문에 잘 숙지하는 것이 좋겠다.

 

 

 

 

 

 

 

출처 : https://zellwk.com/blog/understanding-css-box-sizing/

Zell Liew

https://stackoverflow.com/questions/46923610/css-resetting-margin-and-padding?rq=1

CSS Resetting Margin and Padding