Compreendendo o Modelo de Caixa de Forma Prática

Elementos HTML são renderizados como caixas retangulares em uma página web. Cada elemento possui sua área de conteúdo, preenchimento (padding), borda e margem.

As Quatro Partes do Modelo de Caixa

Conteúdo

A área de conteúdo contém texto, imagens ou outros elementos. Esta é a parte interna visível do elemento.

Padding

Padding é o espaço entre o conteúdo e a borda. Cria espaçamento interno.

.box {
  padding: 20px;
}

Padding aumenta o tamanho visível do elemento.

Border

A borda envolve o padding e o conteúdo.

.box {
  border: 4px solid darkblue;
}

Por padrão, a largura da borda é 0 e a cor da borda corresponde à cor do texto se não especificada.

Margin

Margin é o espaço externo à borda. Cria distância entre os elementos.

.box {
  margin: 40px;
}

Margin não afeta a cor de fundo do elemento.

Neste exemplo:

• O fundo preenche a área de conteúdo e o preenchimento (padding);
• A borda envolve essas áreas;
• A margem cria espaço fora da caixa.