Todos os elementos HTML podem ser considerados como "caixas". Em CSS, a expressão "modelo da caixa" é usado quando falamos sobre o design e o layout. O modelo da caixa é muito simples, e serve para visualizar o que está ao redor do elemento HTML, consistindo de:

• margens
• bordas
• enchimento
• conteúdo

Com este modelo em mente fica fácil de relacionar o espaço, tanto dos próprios elementos como entre eles. Veja na imagem abaixo como você pode visualizar o modelo da caixa. Vamos explicar de forma geral como você pode entender o modelo da caixa, sem entrar em maiores detalhes. Escreveremos um outro artigo, próximo desta série, onde trataremos em detalhes como lidar com este modelo e tiraremos o máximo de proveito. Por hora, tente compreender como ele funciona, e assim poderá usar bem melhor os conceitos de CSS.

Primeiro, vejamos o que é cada parte.

• Margem: obviamente é uma área ao redor da borda. A margem não tem uma cor de background, sendo completamente transparente. Ela não é nada além disso: uma margem para o elemento.
• Borda: novamente bem claro. É uma borda que circunda o conteúdo e o enchimento. A borda recebe a cor do background do elemento.
• Enchimento: área entre o conteúdo e a borda. Também é afetado pela cor do background.
• Conteúdo: é o elemento propriamente dito, é o conteúdo da caixa - seja um texto, uma imagem etc.

Note que você pode inclusive indicar a borda como não tendo espessura, bem como o enchimento e a margem. Você escolhe o que usar. Mas é preciso compreender bem como indicar a altura e a largura de cada parte da caixa para que todos os navegadores possam lidar bem com elas. Então vejamos.

Primeiro ponto a entender: quando indicamos a altura e largura de um elemento em CSS, estamos indicando as dimensões do conteúdo apenas. Para saber as dimensões totais do elemento, precisamos somar com as dimensões do preenchimento, da borda e da margem.

Por exemplo, o elemento com as dimensões abaixo possui 250px:

• width:200px;
• padding:10px;
• border:5px solid gray;
• margin: 10px;

A dimensão será de 250px, pois teremos conteúdo (width) de 200px mais preenchimento (padding) de 10px de cada lado, mais borda (border) de 5px de cada lado e mais margem (margin) de 10px de cada lado. Digamos que você só pode usar 200px para este elemento em sua página. Simples: podemos tirar a margem e assim ganhamos 20px, e também diminuímos a dimensão do conteúdo para 170px. Se esta configuração não atrapalhar a leitura da página, usamos a configuração abaixo.


Agora é com vocês. Testem o que foi visto aqui. Com um pouco de prática, o uso de CSS torna o trabalho mais simples e provavelmente o resultado será bem mais bonito.

Como disse acima, no próximo artigo trataremos de forma detalhada do modelo da caixa, conferindo ainda mais poder aos estilos dos elementos em nossa página. E também trataremos de alguns aspectos avançados em Folhas de Estilo. Afinal, após compreender em profundidade o modelo da caixa, já estaremos prontos para aplicações mais interessantes.

Até o próximo artigo.