[CSS] box-sizing

#CSS
.box-ex1 {
  width: 500px;
  margin: 20px auto;
}

.box-ex2 {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

#HTML
<div class="box-ex1"> 박스 1 </div>
<div class="box-ex2"> 박스 2 </div>

box-ex1 보다 box-ex2 가 같은 사이즈의 width 이면서도 사이즈가 훨씬 더 크다.
이유는 padding과 border-width 때문.
이처럼 일정하지 않은 너비값 조절 해법이 만족스럽지 않았던 사람들은
box-sizing 이라는 새로운 CSS 프로퍼티를 만들었다고 한다.
즉, box-sizing를 지정하면 패딩과 테두리가 더는 너비를 늘리지 않도록 할 때 사용된다.

쓰는 방법은 다음과 같다

 -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;

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

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

#HTML
<div class="box-ex1"> 박스 1 </div>
<div class="box-ex2"> 박스 2 </div>

아울러 이 기법은 IE8+ 에서만 사용할 수 있다는 점을 염두하자

참고사이트 : http://ko.learnlayout.com/ (CSS 공부하기에도 좋은 사이트이다)