border-box 의 원리

 

css box padding의 기본 원리

width를 200을 지정한 후, 패딩을 50을 주면,

CSS에서는 기본 박스 가로(200px)을 유지한 채

패딩(50px)만큼 크기를 늘림

 

그렇기에 총 width는 250xp이 됨

 

이를 막기 위해 

box-sizing:border-box를 사용함.

box의 크기를 유지한 채 padding 값을 줄 수 있다