O que é o modelo de caixa em CSS?

O modelo de caixa em CSS descreve como é calculado o espaço ocupado por um elemento numa página web. Inclui:

• Conteúdo: A área para o conteúdo real do elemento (texto, imagens).
• Padding (preenchimento): Espaço entre o conteúdo e a borda do elemento.
• Borda: A borda que envolve o padding e o conteúdo.
• Margem: Espaço ao redor da borda do elemento, separando-o de outros elementos.

O tamanho do elemento por padrão (no modelo padrão box-sizing: content-box) é determinado pela soma dos tamanhos do conteúdo, padding e borda. A margem é adicionada ao espaço total ocupado, mas não afeta o tamanho do próprio elemento.

A propriedade box-sizing: border-box altera o cálculo do tamanho do elemento, incluindo padding e borda na largura e altura totais. Assim, o tamanho do elemento é definido por width/height, e o padding e a borda "consomem" espaço do conteúdo.

/* Modelo padrão (por defeito) */
.element-content-box {
  width: 100px; /* Tamanho do conteúdo */
  padding: 10px;
  border: 5px solid black;
  /* Largura total: 100px (conteúdo) + 10px (padding esquerdo) + 10px (padding direito) + 5px (borda esquerdo) + 5px (borda direito) = 130px */
}

/* Modelo border-box */
.element-border-box {
  width: 100px; /* Largura total: conteúdo + padding + borda */
  padding: 10px;
  border: 5px solid black;
  /* Tamanho do conteúdo: 100px - 10px (padding esquerdo) - 10px (padding direito) - 5px (borda esquerdo) - 5px (borda direito) = 70px */
}

Compreender o modelo de caixa é fundamental para posicionar e compor elementos com precisão na página.