O que é o modelo de caixa em CSS?

O modelo de caixa CSS descreve como os elementos são exibidos na página como blocos retangulares. É composto por quatro zonas ou camadas que se sobrepõem, começando pelo conteúdo:

1. Conteúdo: A área onde está o conteúdo real do elemento (texto, imagens, etc.). O seu tamanho é determinado pelas propriedades width e height.

2. Padding (Preenchimento): A área transparente entre o conteúdo e a borda do elemento. É definida pelas propriedades padding-top, padding-right, padding-bottom, padding-left ou pela abreviatura padding.

3. Borda (Border): A linha que envolve o Padding e o Conteúdo. O seu estilo, espessura e cor são definidos pelas propriedades border-width, border-style, border-color ou por abreviaturas como border.

4. Margem (Margin): A área transparente ao redor da borda do elemento, que o separa de outros elementos. É definida pelas propriedades margin-top, margin-right, margin-bottom, margin-left ou pela abreviatura margin. As margens de blocos adjacentes podem colapsar.

O comportamento padrão, descrito por box-sizing: content-box (por defeito), determina que as propriedades width e height se referem apenas ao bloco de conteúdo (Content). Padding e Border são adicionados a esse tamanho, aumentando o tamanho total do elemento.

Ao usar box-sizing: border-box, as propriedades width e height incluem o Conteúdo, Padding e Border. A margem (margin) é sempre adicionada ao tamanho total do elemento, independentemente de box-sizing.

Exemplo:

div {
  width: 100px; /* Largura do Conteúdo (para content-box) ou de todo o elemento (para border-box) */
  height: 50px; /* Altura do Conteúdo (para content-box) ou de todo o elemento (para border-box) */
  padding: 10px; /* Preenchimento interno */
  border: 2px solid black; /* Borda */
  margin: 15px; /* Margem externa */
}

Dependendo do valor de box-sizing, os tamanhos reais do elemento serão diferentes.

• box-sizing: content-box: Largura real = 100px (Conteúdo) + 10px (Padding esquerdo) + 10px (Padding direito) + 2px (Border esquerdo) + 2px (Border direito) = 124px. Altura real = 50px (Conteúdo) + 10px (Padding superior) + 10px (Padding inferior) + 2px (Border superior) + 2px (Border inferior) = 74px.
• box-sizing: border-box: Largura real = 100px (Conteúdo + Padding + Border). Altura real = 50px (Conteúdo + Padding + Border).

A margem externa margin: 15px é adicionada ao redor desse tamanho total.