(CSS) 박스 사이징 : content-box vs border-box

 

Box-sizing : border-box를 쓰고 시작하는 이유

 

일단 CSS는 기본적으로 box-sizing : content로 디폴트값이 설정되어있다.

그렇다면 무엇이 문제가 되는가?

 

Width : 480px

Height: 480px을 줬을 때

 

우리가 직관적으로 보는 (보더까지가 박스사이즈)라고 보는 것이 배신당한다는 이야기다.

실제로 패딩은 (보더안쪽, 컨텐츠 영역으로 보면 됨) 늘었을 때 컨텐츠 크기에 +되는 경향이 있음

그렇다면 저 사진 기준으로 박스 사이즈가 원래 설정해주고 싶음 480Px에 고정되는게 아니라,

Height 480+패딩 탑 40이 되고, width 480 + 패딩 left 50이 되는 것 (정사각형이 아닌 직사각형이 됨)

 

이런 짜증나는 경우를 잡기위해 필요한 게

 

Box-sizing : border-box을 설정하면

패딩, 보더값까지 포함해서 480px 480px으로 고정됨

 

 

Ex)

 

 

Border-box 속성을 줬을떈

패딩을 각각 40px 50px씩 주면은

자동으로 컨텐트의 Height와 Width값이 보더박스까지 포함한 480을 유지하기위해

컨텐트 width와 height는 패딩값을 뺀 430, 440으로 각각 줄어듬

 

여기에다가 보더값 4px를 추가적으로 설정하면

역시  추가적으로

 

양쪽 8px씩 더 줄어듬

 

 

결과