box-sizing: border box 사용법

box-sizing: border box은 언제 사용하는 것일까?

box-sizing: border box는 기존 box에 padding값을 줄 경우, 안의 contents의 길이가 줄어들지 않게 해줍니다.

예시) width:300px, padding-left: 20px인 경우 (right/top/bottom 상관없음)

padding-left로 20px만큼 차지하기 때문에 contents가 사용할 수 있는 width는 280px로 줄어들게 됩니다. 그때 html/css가 하는 역할이 처음 설정한 box의 크기를 유지시켜줍니다. 따라서 browser에서 box의 크기를 300px로 유지할 수 있게 되고,  padding값까지 더해져서 box의 전체 width는 320px이 됩니다. 

---

좀 복잡하게 느껴지신다면 좀더 간단하게 표현해 봅시다.

보통의 경우

 - padding값을 줄 때, 우리는 컴퓨터에게 이렇게 명령하게 됩니다. "padding값을 줘 근데 contents가 들어갈 box의 본래 크기를 유지해!"

box-sizing: border-box;를 설정 시

- box-sizing: border-box;를 설정 시에는 컴퓨터에게 이렇게 명령하게 됩니다. "contents 들어갈 부분 줄어도 괜찮으니까, padding을 추가해도 box크기는 키우지 마"