Compreendendo o Modelo de Caixa de Forma Prática

Todo elemento em uma página web é renderizado como uma caixa retangular. Cada caixa é composta por quatro partes:

• Conteúdo: o texto ou elementos reais;
• Preenchimento (padding): espaço dentro do elemento;
• Borda: envolve o conteúdo e o preenchimento;
• Margem: espaço fora do elemento.

Estrutura Visual

Margem → Borda → Preenchimento → Conteúdo. O tamanho total de um elemento depende de todas essas partes.

Conteúdo

A parte visível do elemento: texto, imagens ou outros elementos.

Padding (Espaço Interno)

Cria espaço entre o conteúdo e a borda.

.box {
  padding: 20px;
}

Shorthand

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Margin (Espaço Externo)

Cria espaço entre os elementos.

.box {
  margin: 20px;
}

Shorthand

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Borda

Define a borda do elemento.

.box {
  border: 4px solid darkblue;
}

Diferença Principal

• Padding → espaço interno (afeta o fundo);
• Margin → espaço externo (NÃO afeta o fundo).

Box Sizing

Controla como a largura e a altura são calculadas.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + border adicionados ao tamanho;
• border-box: tudo incluído no tamanho.

Em projetos reais, border-box é preferido.