content, padding, border, margin이 최종 크기를 만드는 방식을 배웁니다.
기본 content-box에서는 width가 콘텐츠만 뜻하고 padding과 border가 바깥에 더해집니다. border-box에서는 선언한 width 안에 padding과 border가 포함돼 레이아웃 계산이 직관적입니다.
content-box를 쓰는 첫 상자는 width 220px가 콘텐츠 영역만 뜻하므로, 양쪽 padding 48px와 border 16px가 더해져 바깥 너비가 284px가 됩니다. 두 번째 상자는 같은 220px를 border-box로 계산해 바깥 너비가 정확히 220px이고, 그 안에서 padding과 border를 뺀 156px만 글자가 차지합니다. 같은 width를 적었는데 두 상자의 폭이 64px 차이 나는 이유입니다.
box-sizing은 상속되지 않는 속성이라 많은 프로젝트가 전체 선택자로 모든 요소와 의사 요소에 border-box를 한꺼번에 지정합니다. border-box에서도 padding과 border의 합이 width보다 커지면 콘텐츠 영역은 0에서 멈추고 상자는 선언한 width보다 넓어집니다.
두 box-sizing 계산 방식을 섞으면 같은 width인데 실제 크기가 달라질 수 있습니다.
직접 바꿔보세요두 요소의 실제 가로 크기를 개발자 도구에서 비교하세요.