CSS box-sizing: content-box와 border-box의 차이

📌  CSS 기본 박스 모델

 

Content-box 크기에만 width와 height가 적용된다. (Padding X, Border X, Margin X)

따라서 원하는 크기의 박스를 그리려면, Padding 값이나 Border 값을 고려해야한다.  ^아오 귀찮아^

 

 

 

🏁  그래서 등장한 box-sizing!

 

솔직히 우리, Parent container안에 있는 Child container들 ...

Parent가 정한 영역에서 빠져나오지 않았으면 하는 것들이 대부분이잖아 ...

 

 

◾ box-sizing: content-box

 

CSS 기본 박스 모델을 따른다 ! 에라 모르겠고 !

난 그냥 Content에만 width, height 줄거야 ! Padding, Border 나몰라라~

100px width를 설정하게 되면 최종값을 Padding과 Border가 따로 더해져서 나도 모르던 width 결과값이 툭툭.

 

 

◾ box-sizing: border-box

 

난 Border-box 까지 고려하는 착한 아이 !

100px width를 설정하면, Padding, Border값 고려해서 Content가 작아지는 한이 있더라도 총 너비 100px을 유지한다.

대부분의 경우, 이 편이 크기를 조절할 때 쉽습니다 :)

 

 

 

❗ 보통 CSS에서 body 태그에 선언해놓고 시작하긴 한다 :)