Introdução

O Box Model é a forma como o CSS representa qualquer elemento na tela. Cada elemento HTML é tratado como uma "caixa" que possui quatro camadas principais:

• Content: o conteúdo do elemento (texto, imagem, vídeo, etc).
• Padding: espaço interno entre o conteúdo e a borda.
• Border: a borda visível em torno do padding.
• Margin: espaço externo entre a borda e outros elementos.

Visualização do Box Model

+-------------------------+  ← margin
|   [   Borda (border)   ]|
|   +-----------------+   |
|   |  Padding        |   |
|   |   +---------+   |   |
|   |   | Content |   |   |
|   |   +---------+   |   |
|   +-----------------+   |
+-------------------------+
    

Cada camada pode ser manipulada para ajustar a posição e tamanho da caixa. O conhecimento dessas camadas é essencial para criar layouts precisos e responsivos.

Exemplos de Box Model em ação

.caixa-exemplo {
    width: 200px;
    height: 100px;
    padding: 15px;
    border: 5px solid #f00;
    margin: 20px auto;
    background-color: rgb(14, 95, 177);
    text-align: center;
}
        

h1 {
    width: 260px;
    padding: 10px;
    border: 8px solid #0048ff;
    margin: 10px auto;   
    outline: 5px solid rgb(0, 255, 34);
}
        

Diferença entre Block-level e Inline-level

Elementos block-level ocupam a largura inteira e quebram linha automaticamente. Exemplos: <div>, <h1>, <p>.

Elementos inline-level ocupam apenas o espaço necessário do conteúdo e não quebram linha. Exemplos: <span>, <a>, <strong>.

/* Block-level */
div {
  width: 300px;
  border: 2px solid blue;
  margin: 10px 0;
}

/* Inline-level */
span {
  border: 2px solid green;
  padding: 5px;
}
    

Dicas Importantes

• Use outline para depuração de caixas, pois não afeta o layout.
• Lembre-se: se o conteúdo não cabe na caixa definida, o navegador quebra linhas automaticamente.
• Experimente alterar apenas padding, margin ou border para entender o efeito de cada camada.
• O conhecimento do Box Model é fundamental para trabalhar com layouts avançados e responsivos.

Extras / Observações

Existem propriedades CSS relacionadas ao Box Model que você verá mais adiante: box-sizing (content-box vs border-box), min-width, max-width, min-height, max-height. Mas por enquanto, foque em compreender bem content, padding, border e margin.

Temos aqui um complemento prático em vídeo

Modelos de Caixas na prática — Parte 1

Recomendo assistir com atenção: há detalhes muito valiosos na aplicação prática.

Dica: Use o DevTools do navegador no (F12) explore com calma e sem medo.

Parte 2 — Continuação da prática sobre Modelo de Caixas

É essencial que você siga a sequência corretamente, pois ambos os vídeos complementam o aprendizado e contêm informações fundamentais para o seu desenvolvimento.

Laboratório de Prática

1. Crie três caixas usando <div> com cores diferentes.
2. Altere apenas o padding de uma delas e observe a diferença no espaço interno.
3. Altere apenas a margin de outra e veja como muda o espaçamento externo.
4. Experimente uma caixa com <span> dentro de um parágrafo e observe a diferença entre inline e block.
5. Use outline em uma das caixas para depuração visual sem afetar o layout.