box-sizing

div 등의 박스 사이즈를 지정했을 경우, 사이즈를 계산하는 기준을 무엇을 할 것인지 설정할 수 있다.

가로값width과 세로값height 모두 적용된다

E { box-sizing : keyword; }

해당 컨테이너 width:100px; padding:20px; border:10px;이라고 설정했을 때.

keyword 1. content-box

div {
width:100px;
padding:20px;
border:10px;
box-sizing:content-box;
}

최종 width는 160px이 된다.

과거의 계산방식과 동일한 방식.
컨텐츠 영역만 100px로 설정되고, 나머지 padding, border 값이 추가되어 가로값이 최종 계산된다.

keyword 2. border-box

div {
width:100px;
padding:20px;
border:10px;
box-sizing: border-box;
}

최종 width는 100px이 된다.

contents + padding + border 모두 합친 사이즈를 100px로 보여준다.
디자인 쪽에서 매우 편하게 사용할 수 있다.

요즘엔 처음 리셋시 border-box를 넣는 추세.

keyword 3. padding-box (Firefox Only)

div {
width:100px;
padding:20px;
border:10px;
moz-box-sizing: padding-box;
}

최종 width는 120px이 된다.

파이어폭스에만 적용되는 값이다.
컨텐츠영역+패딩까지만 합쳐서 100px을 만들고, 보더는 바깥으로 추가하여 계산한다.
따라서 최종 박스 사이즈는 100 + 10 + 10 = 120px이 된다.