Modelo de Caixas

As caixas podem ser representadas pelos seguintes elementos especificados a seguir e ilustrados na Figura 2:

• Margin – especifica uma área ao redor da borda, ou seja, determina a distância entre caixas. As margens são transparentes e cada elemento HTML tem uma margem default determinada pelo browser, ou seja, embora as especificações CSS preconizem uma margem default 0 (zero) para todos os elementos HTML, cada fabricante de browser adota um valor default para a margem (SILVA, 2010).
• Border – como você viu na estilização de tabelas e formulários, uma borda determina um tipo de linha decorativa ao redor de um elemento. Cada caixa pode ter 4 bordas, a saber: de cima, da direita, de baixo e da esquerda. Bordas são, por padrão (default), transparentes e de espessura zero.
• Padding – determina a distância entre a borda e o conteúdo. Esse elemento é afetado pela cor de plano de fundo da caixa, ou seja, essa distância assumirá o plano de fundo definido para o elemento.
• Content – indica o conteúdo da caixa; é onde o texto e imagens aparecem. É representado por qualquer elemento (X)HTML que descreve conteúdo, tais como títulos, links, listas, tabelas, formulários etc.

Veja um exemplo na Figura 3. Nesse exemplo, há dois títulos, de nível 1 e 2, e dois parágrafos. O CSS define bordas, espaçamento e plano de fundo para cada um desses elementos, veja o resultado.

É possível definir uma cor ou uma figura para o plano de fundo das caixas, definir uma cor, uma espessura e um tipo de borda diferente para cada um dos seus quatro lados, bem como definir diferentes espessuras e espaçamentos para cada lado.

A seguir, mostramos quais as propriedades que compõem cada uma dessas partes constituintes das caixas e, em seguida, apresentamos como dimensionar os elementos (X)HTML.