CSS básico #002

A BASE DO CSS É EM CAIXAS

Todos os elementos que podem ser vistos numa página da Web ocupam uma determinada área na página. Essa área tem a forma de um rectângulo, que designamos por caixa. A caixa de um elemento contém tudo aquilo que lhe diz respeito: conteúdo, linhas de contorno, margens e espaço em branco. O esquema seguinte representa de forma genérica as diversas áreas que constituem a caixa de um elemento.

Para percebermos o significado deste gráfico aqui ficam alguns esclarecimentos:

1. O conteúdo do elemento fica dentro de um rectângulo em redor do qual existem outras áreas.
2. Entre o conteúdo do elemento e os seus limites (border) pode existir espaço em branco, que designamos por padding.
3. Os limites do elemento designam-se por border. É aí que o elemento termina.
4. O rectângulo (caixa) que contém o elemento pode ter margens (margin) a separá-lo dos outros elementos da página. As margens estão fora dos limites do elemento.

A largura de um elemento é determinada unicamente pela largura do seu conteúdo. Já a largura da caixa que contém o elemento é dada pela soma da largura do conteúdo mais as larguras ocupadas pelas linhas de contorno (border) e pelo espaço em branco (padding). A altura de um elemento calcula-se de forma análoga. As margens servem para deslocar o rectângulo (caixa) do elemento relativamente à sua posição normal.