Modelo CSS para boxes - Parte 2

Publicado em: 10/06/2004

[Parte 1] [Parte 3]

Características de cada uma das quatro áreas da caixa

Agora que você já conhece a anatomia de uma caixa, vamos mostrar quais as peculiaridades de cada área que a compõe.

  1. As margens (margin) são sempre transparentes e cada elemento HTML tem uma margem default determinada pelo browser, isto é 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. Você com certeza já notou que em um documento HTML a distância entre dois cabeçalhos, entre dois parágrafos, entre um cabeçalho e um parágrafo, é diferente. Estas distâncias são as margens daqueles elementos.
  2. As bordas (border) são transparentes e de espessuras iguais a zero por default;
  3. Os espaçamentos (padding) são transparentes e de espessuras iguais a zero por default;
  4. O fundo (background) de uma caixa está por trás do conteúdo e do espaçamento.

As regras CSS para cada uma das quatro áreas da caixa

Com regras CSS você pode controlar a aparência e dimensões de cada uma das quatro áreas que compõem a caixa.

  1. As espessuras das margens, das bordas e dos espaçamentos podem ser definidas com valores diferentes para cada um dos quatro lados da caixa;
  2. Se as espessuras forem definidas com valor 0 (zero) elas não serão exibidas;
  3. As cores e o tipo das margens podem ser definidas com valores diferentes para cada um dos quatro lados da caixa;
  4. A cor ou uma imagem de fundo pode ser definida para ser colocada por trás do conteúdo e do espaçamento.

Link para os tutoriais das propriedades citadas:

As caixas "bloco" e as caixas "inline"

Existem dois tipos de caixas: caixas nível de bloco (block-level) e caixas inline a exemplo dos elementos HTML que também podem ser bloco ou inline. Neste tutorial vamos estudar as caixas nível de bloco.

Lembrando o conceito visto em HTML que diz que elementos nível de bloco criam uma quebra de linha (por exemplo <p>), enquanto elementos inline não geram quebra de linha (por exemplo <span>)

Cada elemento HTML cria uma caixa. Assim, um parágrafo (<p>), um cabeçalho (<h1>,< h2>, etc..) ou uma divisão (div) todos eles criam uma caixa quando são exibidos.

Se um elemento está contido dentro de outro elemento, então sua caixa será exibida dentro da caixa do elemento em que esta contido (elemento "pai" ). Por exemplo, um parágrafo <p> dentro de uma divisão <div>.

Extensão do conceito de caixas

Um bloco de conteúdo é uma área retangular em um documento HTML na qual uma ou mais caixas são colocadas. Caixas normalmente estão confinadas dentro dos limites de um bloco de conteúdo.

O mais importante bloco de conteúdo é a área do navegador onde é exibido o conteúdo da página (viewport).

Se um bloco contém várias caixas, elas são colocadas uma em baixo da outra. Caixas assim colocadas têm suas MARGENS SOBREPOSTAS. Isto significa que se duas caixas são colocadas uma após a outra, a margem inferior da caixa de cima se sobrepõe a margem superior da caixa de baixo e a margem final entre as caixas será igual a maior delas.

A figura abaixo ilustra este conceito.

Foi definida uma margem inferior de 80 px para <h3> e uma margem superior de 50px para o primeiro parágrafo. Notar que a margem resultante não é de 80px + 50px = 130px e sim 80px

Screenshot mostrando o colapso  das margens

Sobreposição das margens:

A distância ilustrada com 80px representa a margem inferior da caixa de cima ( o elemento <h3>).

A distância ilustrada com 50px representa a margem superior da caixa de baixo ( o elemento <p>).

A margem inferior da primeira caixa (<h3>) é maior do que a margem superior da segunda caixa (<p>), em consequência a margem resultante será de 80px. Veja que as margens não se somam, elas se sobrepõem prevalecendo a maior delas.

[Parte 1] [Parte 3]