[CSS] box-sizing 속성

box-sizing

•  padding 과  border 을  width 와  height 에 속하게 할지 설정해주는 기능입니다.

 

문법

box-sizing: content-box | border-box | initial | inherit

 

• content-box : box-sizing의 기본값으로  content  영역의 너비만 포함합니다.
• border-box :  content ,  padding ,  border  영역이 너비에 포함됩니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성 값을 상속받습니다..

 

 

예제

 box-sizing 의  content-box ,  border-box  차이점.

 

See the Pen box-sizing by heerachoi (@heerachoi) on CodePen.

 

 

Reference

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