Box model,Box-sizing (CSS)

padding : content 와 border 안쪽 여백

 

 

 

html default 값

(default) box-sizing = content-box

* box-sizing : content-box 기준
기준이 content box 를 기준으로 width ,height 측정이 된다.(실제 사이즈 보다 크게 보인다.)
(padding , border 값을 더한 값이 보이기 때문에)

(밑 사진 참고)

즉, 사용자가 눈에 보이는 것은 width : 530px  height: 520px

 

 

사람의 인지구조와 CSS가 동작하는것이 동일하게 보이려면

box-sizing : border-box;

 

별도로 계산할 필요 없이 알아서 내가 원하는 크기를 가져다준다

참고

edu.goorm.io/learn/lecture/20583/%EA%B9%80%EB%B2%84%EA%B7%B8%EC%9D%98-html-css%EB%8A%94-%EC%9E%AC%EB%B0%8C%EB%8B%A4