너비(width)에 패딩(padding)도 포함이 되나요?

---

CSS 박스 사이즈 속성(box-sizing property)에는 두 가지가 있습니다. 

border-box와 content-box입니다. 

border-box에서 너비(width)는 패딩(padding)과 보더(border)를 포함하게 됩니다.

border-box는 IE(인터넷 익스플로러)에서 사용되는 방식으로 비표준방식입니다. 

예를 들어 

#foo {width: 100px; padding: 5px; border: 2px; }

박스모델에 위의 css를 적용시키면 너비는 패딩과 보더를 포함하기 때문에 그대로 100픽셀이 됩니다. 

반대로 content-box는 너비가 패딩과 보더를 포함하지 않는 수치입니다. 

content-box는 IE를 제외한 브라우저들에서 사용되고 있습니다. 

위에서 본 똑같은 예시는  content-box모델에 적용하게되면

100(width) + 5(padding-left) + 5(padding-right) + 2(border-width) + 2(border-width) = 114px의 너비를 가지게 됩니다. 

본인이 너비를 지정해놓았음에도 패딩과 보더값에 의해서 너비가 변경되어 불편하시다면 현재 content-box가 적용되어 있는 겁니다.

border-box로 변경하고 싶으시다면 아래와 같이 브라우저별로 적용해주시면 됩니다. 

* {

box-sizing: border-box; /* 오페라(Opera) */

-moz-box-sizing: border-box; /* 파이어폭스(Firefox)*/

-webkit-box-sizing: border-box; /* 웹킷(Webkit) & 크롬(Chrome) */

}

---