선언한 너비와 실제 크기가 왜 달라지는가?

기본 content-box에서는 선언한 너비 밖에 패딩과 테두리가 더해지기 때문이다. border-box를 쓰면 선언한 너비 안에 둘이 포함된다.

렌더된 박스 너비는 콘텐츠와 좌우 패딩, 좌우 테두리를 합한 값이다. 마진은 박스 크기에 포함되지 않고 주변 간격을 만든다.

전체에 box-sizing: border-box를 적용하면 레이아웃 계산이 직관적이다. 다만 콘텐츠 영역은 패딩과 테두리가 늘수록 줄어든다.