box-sizing 속성

box-sizing 속성은 CSS3 기술로서 

이것을 사용함으로서 여백과 선을 포함시킬것인지 아님 내용만 포함시킬 것인지를 정할 수 있습니다.

우선 지원하는 브라우저를 알아보도록 하겠습니다.

크롬	엣지	익스플로러	파폭	사파리	오페라
10.0 ~ 4.0 -webkit-	12.0	8.0+	29.0 ~ 2.0 -moz-	5.1 ~ 3.2 -webkit-	9.5

box-sizing 속성값

 content-box 

너비와 높이의 사이즈를 입력했을 때 그에 관한 사이즈를 선이나 안의 여백 부분을 포함시키지 않은 순수한 내용 부분만 사이즈가 적용됩니다.

즉 box-sizing 의 값을 지정하지 않았을때와 같습니다. 기본이라는 것이죠.

 border-box 

width값과 height값이 있을경우 여백과 선을 포함시켜 사이즈를 적용 시켜 줍니다. 즉 width가 100px이라면 100px 안에서 padding이나 border값이 적용되어도 더이상 넓이가 늘어나지 않고 정해진 사이즈안에서 적용됩니다.

 padding-box 

border-box 와 비슷하나 border 선을 제외한 여백과 내용부분을 포함하여 사이즈를 적용합니다.

최신기술이므로 접두사를 사용하여 css 작성합니다. 다음순으로 작성하여 적용하면 됩니다.

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