box-sizing. border-box, content-box

box sizing

content-box

/* width와 height의 기준을 content로 설정한다 
 * width: 500px; 을 지정하면 content만 500px가 되고 padding, border 등은 따로 계산해야 한다.
*/
* {
  box-sizing: content-box;
}

border-box

/* box-sizing: width와 height의 기준을 boder box를 포함한 크기로 설정한다 
 * width: 500px; 을 지정하면 border를 포함한 크기가 500px로 설정된다.
*/
* {
  box-sizing: border-box;
}