border 값을 지정할 때 지정 넓이 값 이외 border 값이 따로 나오는 것을 해결

예를 들면 width:300px이고 border가 2px이면 가로 넓이는 304px이 됨.

%로 작업하게 될 때 머리 아파짐.

box-sizing: border-box; 로 잡으면 border 값과 함께 넓이를 잡아줌.

자동으로 206px에 border 값 4px을 잡아 넓이 300px을 잡아줌.

.test {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.test2 {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
 

전체 규정은

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}