박스 모델은 CSS가 요소의 크기와 주변 공간을 다루는 기본 구조다. 하나의 상자에는 내용 영역과 안쪽 여백과 테두리와 바깥 여백이 있다. 안쪽 여백인 padding은 내용과 테두리 사이의 공간을 정한다. 바깥 여백인 margin은 상자 밖에서 다른 요소와의 거리를 조정한다. 같은 여백처럼 보여도 어디에 속하는지에 따라 요소 사이의 관계가 달라진다. 새로운 질서는 제목과 문단과 이미지도 이런 상자의 관계로 살펴볼 수 있다고 설명한다.
box-sizing은 지정한 너비와 높이를 어떤 영역의 크기로 해석할지 정하는 CSS 속성이다. border-box를 사용하면 지정한 크기에 안쪽 여백과 테두리까지 포함해 계산할 수 있다. 상자를 추가하면 크기뿐 아니라 앞뒤 간격과 부모 안에서의 배치도 함께 고려해야 한다. 화면이 좁아지거나 내용이 늘어날 때 새 상자가 다른 요소와 어떤 관계를 맺을지도 확인해야 한다. 단순함은 비어 보이는 모양뿐 아니라 계속 관리해야 할 관계를 줄이는 방법으로도 생각할 수 있다. 상자의 구조를 이해하면 여백과 반응형 디자인을 감각에만 맡기지 않고 구체적으로 조정할 수 있다.