O modelo de caixa descreve quanto espaço um elemento ocupa em uma página da web. É como um quadro emoldurado: a imagem fica dentro, um passe-partout a envolve, a moldura delimita as bordas e o espaço vazio da parede a separa de outros quadros.
Em uma caixa da página, o conteúdo fica dentro do preenchimento, depois vem a borda e, por fora, a margem. Essas camadas afetam o tamanho aparente do elemento e a distância até os elementos vizinhos.
Conhecer as camadas ajuda a explicar por que um cartão ocupa mais espaço do que apenas sua imagem ou seu texto. Ajuste a camada certa para alterar o espaço interno ou a distância em relação aos outros itens.