CSS - box-sizing 박스 크기 기준 정하기

티스토리 스킨 편집할 때 css 파일에서 정말 자주 봤던 속성 중 하나다. 이 box-sizing은 박스의 크기를 어떤것을 기준으로 정할 것인지를 나타내는 속성이다.

 

 

위의 박스와 아래 박스 모두 300px width 와 100px height이지만 padding 과 border 의 사이즈에 따라 위와 같은 차이가 난다.

 

 

왼쪽처럼 요소를 렌더링하고 싶다면 box-sizing 속성을 border-box로 주면 된다. 속성 지정을 하지 않으면 오른쪽의 box-sizing: content; 로 지정된다.

 

그러나 만약 width:100%를 지정하는 경우 부모 컨테이너의 너비의 100%를 차지해야하는데, padding 이나 border 속성을 더 주면 부모 컨테이너보다 더 커질 수도 있다. 이를 해결하기 위해서는 box-sizing을 border-box 로 주거나 width: auto로 설정하면 된다. (width의 기본값은 auto 이므로 속성 설정을 하지 않아도 된다.)

 

 

 

---

 

 

Reference:

https://ofcourse.kr/css-course/box-sizing-%EC%86%8D%EC%84%B1

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

box-sizing - CSS: Cascading Style Sheets | MDN