[CSS] 패딩값과 보더값을 포함시키는 box-sizing

패딩값과 보더값을 포함시키는 box-sizing

모든 요소는 margin, norder, padding 값을 가지고있다.

즉, width값과 height값을 가지고있다

 

따라서 기본적으로 요소의 가로값과 세로값은

object + margin + padding + border

 

box-sizing 속성은 패딩과 보더의 포함여부를 설정

a {box-sing: border-box;}
/* width값 안에 padding과 border값을 포함. */

a {box-sizing: content-box;}
/* width값 안에 padding과 border값을 불포함. */

* box-sizing은 반응형 작업시 %와 px를 같이 쓸 경우 용이.

* 처음 reset.css 설정시 box-sizing: border-box를 설정하는 경우도 많음.