[CSS] box-sizing

box-sizing 이란?

박스크기 기준을 어떤걸로 정할지 지정하는 키워드

 

div {

  width:500px;

  border:20px;

}

 

일반적인 css 에서는 div 박스의 크기는 540px이 된다.

 

하지만,

box-sizing:border-box; 로 세팅해주면

div 박스의 크기는 500px 로 정해진다.

 

선택옵션 ::

box-sizing : content-box; (테두리가 있으면 테두리 만큼 박스의 크기가 커짐)

box-sizing : border-box; (테두리 때문에 넓어지지 않음)

box-sizing : initial; (기본값)

box-sizing : inerit; (부모 요소의 속성 상속함)

 

 

 

참조

https://www.codingfactory.net/10630

CSS / box-sizing / 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성