O que é o modelo de caixa no CSS?

No CSS, o modelo de caixa descreve uma região retangular que é gerada para cada elemento e usada para calcular as suas dimensões e posição. É composta por quatro partes:

• Caixa de conteúdo: A área onde o conteúdo do elemento (texto, imagens, etc.) é exibido. O seu tamanho é determinado pelas propriedades width e height.
• Caixa de padding: O espaço entre a borda do conteúdo e a borda do elemento. O seu tamanho é determinado pela propriedade padding. A cor de fundo e a imagem do elemento estendem-se a esta área.
• Caixa de borda: A borda do elemento que envolve a caixa de padding. O seu tamanho é determinado pelas propriedades border.
• Caixa de margem: O espaço ao redor da borda do elemento, separando-o de outros elementos. O seu tamanho é determinado pelas propriedades margin. Esta área é sempre completamente transparente.

O tamanho do elemento por padrão é calculado da seguinte forma:

largura = width + padding-left + padding-right + border-left-width + border-right-width
altura = height + padding-top + padding-bottom + border-top-width + border-bottom-width

A propriedade box-sizing permite alterar este modelo:

• content-box (padrão): Os tamanhos width e height referem-se apenas à caixa de conteúdo.
• border-box: Os tamanhos width e height incluem o padding e a borda.

.element-default {
  width: 100px; /* Largura da caixa de conteúdo = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Largura real do elemento: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Largura real do elemento = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Largura da caixa de conteúdo: 100 - 10 - 10 - 5 - 5 = 70px */
}