Usando modelos de caixa (box-level)

Todo elemento que aparece na tela é um modelo de caixa. De forma geral, temos dois tipos de caixas: as box-level (por exemplo, a tag div) e as inline-level (por exemplo, a tag span). Para um dado elemento, podemos definir a largura (width) e altura (height). Além disso, os seguintes elementos geralmente podem ser definidos:

• border: define uma borda que contorna o conteúdo;
• padding: é um espaçamento entre o conteúdo e a borda;
• margin: é um espaçamento externo;
• outline: é um contorno externo ao elemento;

Parágrafos também são exemplos de box-level, mas um link é um exemplo de uma tag inline-level. O conceito de caixas é essencial para criar a estrutura de uma página, um exemplo pode ser visto em layout.html.