[CSS Box의 기본 원리]

예를 들어,  width 200px의 박스에 50px의 패딩 값을 부여하면, CSS는 기존 박스의 width 값을 유지하기 위해 50px만큼의 크기를 자동적으로 늘리게 된다. 그래서 box의 크기는 200px 유지 + 추가된 padding 50px => 250px이 된다. 그래서 box를 만들다보면 화면에서 다 나오지 않는 경우가 있을 것이다.

 

이를 해결하기 위해선??? box-sizing:border-box 값을 주게 되면 CSS에게 다음과 같이 명령할 수 있다.

"내가 box에 padding값을 주더라도 box의 크기는 늘리지 말아줘."