box-sizing:content-box;
기본값.
-
ex) width(100) padding(10) margin(1) border(1)의 요소가 있다고 가정하자.
브라우저에서 보여지는 이 요소의 실제 가로 크기는 100이 아니다.
컨텐츠가 들어갈 수 있는 영역(width 100) 외곽에 padding, margin, border값이 생성되기 때문에,
이 요소의 실제 가로 크기 값을 구하려면 width에 나머지 값을 더해줘야 한다.w100+p20+m2+b2=124
124=브라우저에서 보여지는 실제 가로 크기.
(padding, margin, border의 값을 4방향 모두 적용시켰기 때문에 left, right의 값을 고려해 x2 해준다.) -
content-box;를 사용하면 컨텐츠가 들어갈 수 있는 공간을 계산없이 알 수있다.
100=이 요소에서 컨텐츠가 들어갈 수 있는 가로값.
content-box;는 width 외곽에 나머지 값들이 생성되기 때문에 계산할 필요가 없다.
box-sizing:border-box;
width(padding+border)
-
위 예시와 같은 크기의 요소일 때, border-box;를 적용한 요소의 가로를 구해보자.
w100(p+b)+m2=102
102=브라우저에서 보여지는 실제 가로 크기.
border-box;를 적용하면 width 안에 padding, border값이 포함되어 자동 계산된다.
margin은 바깥 여백이기때문에 포함되지 않는다.
따라서 width+margin값만 계산 해주면 요소의 실제 가로크기를 알 수 있다. -
border-box;를 사용하면 적은 계산으로 원하는 요소의 크기를 만들 수 있다.
다만 요소 내에서 컨텐츠가 들어갈 수 있는 공간의 크기를 알아내려면, 요소 크기에서 padding과 border값을 빼줘야 한다.w102-p20-b2=80
80=이 요소에서 컨텐츠가 들어갈 수 있는 가로값.
(제외된 22라는 값은 padding, border값으로 width영역 안에 생성된다.)
