css 박스 모델 3 - box-sizing

box-sizing

box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 정의한다.

box-sizing 속성값

속성값으로는 content-box와 border-box 두 가지가 있다.

1. content-box

기본값(디폴트)이며 콘텐츠 영역만 너비와 높이에 포함한다.

• 요소의 실제 너비(actual width of element)= 콘텐츠의 width + padding + border
• 요소의 실제 높이(actual height of element)= 콘텐츠의 height + padding + border

(1) 아래 div1과 div2는 컨텐츠 크기가 똑같다.

컨텐츠는 같은 크기인데 실제 박스 크기가 다르다

다만 패딩의 크기가 다를 뿐이다.

(2) div1의 경우 컨텐츠의 크기는 300*100픽셀이고 실제 크기는 320*120픽셀이다.

컨텐츠의 크기는 300*100픽셀

 

실제 크기는 320*120픽셀

• 실제 너비: 콘텐츠 300+테두리 20(10*2)= 320 픽셀
• 실제 높이: 콘텐츠 100+테두리 20(10*2)= 120 픽셀

(3) 아래 div2의 경우 콘텐츠 영역은 300*100픽셀이지만 실제 박스의 크기는 400*200이다

• 실제 너비: 콘텐츠 300+패딩 80(40*2)+ 테두리 20(10*2)= 400 픽셀
• 실제 높이: 콘텐츠 100+패딩 80(40*2)+ 테두리 20(10*2)= 200 픽셀

실제 300*100픽셀의 콘텐츠

실제 400*200픽셀의 상자 크기

(4) box-sizing 속성과 content-box 속성값을 부여

box-sizing 속성과 content-box 속성값

(5) 결과는 똑같다.

왜냐하면 이 속성은 기본값이기 때문이다.

box-sizing 속성과 content-box 속성값은 똑같은 결과

2. border-box

이 속성을 사용하면 요소의 크기(너비와 높이)에 콘텐츠 영역뿐만 아니라 여백(padding)과 테두리(border)까지 포함한다.

border-box 속성 부여

(1) 박스의 실제 크기는 똑같아진다.

실제 크기가 같아진다(300*100픽셀)

(2) 그러나 다음 그림을 보면 컨텐츠의 크기는 다르다는 것을 알 수 있다.

컨텐츠의 크기는 다르다(280*80픽셀)

컨텐츠의 크기는 다르다(200*0픽셀)

위의 div2는 콘텐츠 크기가 200*0이므로 실제로는 콘텐츠 영역이 0이다
패딩을 아래와 같이 줄여주면 다음처럼 나타난다.

패딩을 10픽셀로 축소

컨텐츠의 크기는 200*60픽셀)