Laboratório de Informática 1 e 2 (2009)

O Box Model é a maneira que o CSS representa as dimensões e espaçamentos dos elementos da tela. Esta aula é sobre este modelo. As principais propriedades relacionadas ao box model são:

• margin-top, margin-right, margin-bottom, margin-left, margin: determina a margem de um elemento;

• padding-top, padding-right, padding-bottom, padding-left, padding: determina o “enchimento” (espaçamento) de um elemento.

• border-top-color, border-top-style, border-top-width, border-top, border-right-color, border-right-style, border-right-width, border-right, border-bottom-color, border-bottom-style, border-bottom-width, border-bottom, border-left-color, border-left-style, border-left-width, border-left, border-color, border-style, border-width, border: modifica a borda de um elemento.
• outline-color, outline-style, outline-width, outline: determina a linha de contorno ao redor de um elemento;
• height: modifica a altura da área de conteúdo de um elemento;
• min-height: altura mínima de um elemento;
• max-height: altura máxima de um elemento;
• width: largura da área de conteúdo de um elemento;
• min-width: largura mínima da área de conteúdo de um bloco;
• max-width: largura máxima da área de conteúdo de um bloco;

Seguem os exemplos associados à aula:

• Exemplo Margem Padrão;
• Exemplo Margin
• Exemplo Margin Auto
• Exemplo Margin Em
• Exemplo Margin Negativa
• Exemplo Margin Porcentagem
• Exemplo Margin Resumida
• Exemplo Margin Resumida2
• Exemplo Border
• Exemplo Border Específica
• Exemplo Border Resumida
• Exemplo Box Model
• Exemplo Padding
• Exemplo Width Height
• Exemplo CSS Sprite
• Exemplo CSS Sprite 2

Imagens usadas durante a aula:

Apresentação referente à aula (no link).