[CSS] box-sizing

width, height 속성은 엘리먼트의 크기를 지정한다.

border, padding 값을 지정하면 width 값에 +가 되어 전체크기가 달라짐.

이때

box-sizing : border-box;

을 지정하면

width, height 값이 border와 padding값을 합쳐 계산됌!

 

 

적용 전>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

200px  (element width) + 20px + 20px  (padding) + 5px + 5px  (border)

= 250px

 

 

 

 

적용후>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

element width = 200px (기준) - padding - border

20px + 20px  (padding) + 5px + 5px  (border) + 150px  (element width)

= 200px

 

 

 

border+padding+element 값이

설정한 width, height 값으로 적용된다.