Uma página é feita de blocos. Estes blocos são "empilhados" de cima para baixo, de acordo com a ordem do código: o que está no início do código fica em cima e os elementos subsequentes vão se acomodando em baixo uns dos outros. Através de CSS podemos mudar esta ordem, o que veremos na unidade "Trabalhando com Layout". Agora, iremos estudar as principais propriedades que podemos aplicar a estes "blocos" que compõem a página.

Cada elemento pode ter uma margem interna (padding), margem externa (margin) e uma borda (border). A forma como as margens e bordas se comportam junto com os elementos constitui o que é chamado de box model.

A visualização das margens e bordas pode ser facilitada utilizando extensões de navegador como Firebug e Web Developer Toolbar, as quais recomendo serem instaladas.

Margens

Vamos trabalhar com uma div com fundo colorido para exemplificar:

div.margem {
    background: #900;
    color: #FFF;
}

Visualizar Exemplo

Onde está a div? Sem nenhum conteúdo ou margens/bordas, nada aparece. Vamos aplicar uma margem interna:

div.margem2 {
    background: #900;
    color: #FFF;
    padding: 10px;
}

Visualizar Exemplo

A declaração padding: 10px coloca margens internas de 10 pixels em cada um dos lados da div. Veja no exemplo abaixo a diferença com conteúdo e como a margem interna é aplicada:

Visualizar Exemplo

Perceba como as divs estão "coladas" uma na outra. Vamos aplicar margin: 10px; apenas na de baixo:

div.margem3 {
    background: #900;
    color: #FFF;
    padding: 10px;
    margin: 10px;
}

Visualizar Exemplo

Margens externas foram aplicadas a todos os lados da div, assim como as internas. Caso queiramos inserir margens em apenas alguns dos lados, podemos utilizar as propriedades padding-top, padding-right, padding-bottom e padding-left; para as margens externas, margin-top, margin-right, margin-bottom e margin-left. Exemplo:

div.margem4 {
    background: #900;
    color: #FFF;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

Visualizar Exemplo

Ao invés de digitar uma propriedade para cada lado, podemos utilizar a forma abreviada, ou shorthand, das propriedades margin e padding. Funciona da seguinte forma:

• Para aplicar um valor para todos os lados, apenas digitamos um valor, como padding: 10px;.
• Para aplicar um valor para cima/baixo e um para esquerda/direita, escrevemos dois valores: padding: 5px 10px;. O primeiro será aplicado para cima/baixo e o segundo para esquerda/direita.
• Para aplicar um valor para cima, um para esquerda/direita e um para baixo, escrevemos três valores: margin: 5px 10px 20px. O primeiro será aplicado para cima, o segundo para esquerda/direita e o terceiro para baixo;
• Para aplicar um valor para cada lado, utilizamos a ordem cima/direita/baixo/esquerda (sentido horário partindo de cima), desta forma: margin: 5px 10px 15px 30px. O primeiro valor será aplicado para cima, o segundo para direita, o terceiro para baixo e o quarto para esquerda.

Podemos também utilizar outras unidades além de pixels, como %, em (unidade relativa ao tamanho da fonte no elemento), pt (pontos, mais utilizado para impressos), cm (idem), entre outras. No website que montamos ao longo do curso, iremos ver a aplicação das principais unidades e suas vantagens e desvantagens.

Bordas

Com a propriedade border, podemos adicionar bordas ao redor de qualquer elemento. Primeiro, vamos conhecer os componentes desta propriedade. No exemplo abaixo, aplicamos uma borda no topo de um parágrafo:

p.borda1 {
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: #000;
}

Podemos resumir as três declarações acima em apenas uma (shorthand), como o exemplo abaixo:

p.borda1 {
    border-top: 3px solid #000;
}

Visualizar Exemplo

O mesmo vale para border-right, border-bottom e border-left e suas sub-propriedades, como border-left-color, border-bottom-style ou border-right-width.

Para controlar as bordas em um elemento inteiro, podemos utilizar as propriedades border-width, border-style e border-color:

p.borda2 {
    /* a ordem dos lados é a mesma que com margens */
    border-width: 2px 5px 3px 6px; /* aqui, cada lado possui uma borda de largura diferente */
    border-style: dashed dotted; /* estilos de borda diferentes para cima-baixo e esquerda-direita */
    border-color: #000 #090 #900 #009; /* uma cor de borda para cada lado */
    padding: 20px;
}

Visualizar Exemplo

Finalmente, podemos utilizar a propriedade border para definir as bordas uniformemente no elemento:

p.borda3 {
    border: 1px solid #000;
}

Visualizar Exemplo

Com a propriedade border, primeiro especificamos a sua espessura. Neste caso, utilizei pixels, mas você pode utilizar qualquer outra unidade ou palavras-chave como thin (fina), medium (média) e thick (grossa). Depois, escolhemos um tipo de borda. Os principais tipos são: solid (sólida), dashed (tracejada) e dotted. Há outros, como double, inset e outset (exemplos aqui), caso queira experimentar.

Box Model

Agora que já vimos melhor como funcionam as margens e bordas, veremos como elas compõem o Box Model.

Por padrão, um elemento como p ou div irá ocupar todo o espaço horizontal disponível. Podemos dizer, em propriedades CSS, que temos width: auto; height: auto;, ou seja, que a largura e a altura são determinadas automaticamente, sendo que a largura por padrão será 100% na maioria dos casos e a altura será determinada pela quantidade de conteúdo dentro do elemento.

Um bloco como um p pode ter até quatro áreas distintas na sua composição. Da mais externa para a mais interna: margem externa, borda, margem interna e conteúdo.

Visualizar Exemplo

Perceba que, ao aplicar margens e bordas no parágrafo, elas diminuíram a área de conteúdo do parágrafo. Ou seja, a largura total do parágrafo continua a mesma enquanto as margens e bordas subtraíram a área útil do elemento. Isto ocorreu porque por padrão a largura e a altura estão sendo calculadas automaticamente.

Vamos agora definir uma largura de 300 pixels e uma altura de 150 pixels para o parágrafo, além de uma cor de fundo para facilitar a visualização:

p.boxmodel1 {
    width: 300px;
    height: 150px;
    background: #900;
    color: #FFF;
}

Visualizar Exemplo

O que acontece se colocarmos margens internas e bordas?

p.boxmodel2 {
    width: 300px;
    height: 150px;
    background: #900;
    color: #FFF;
    padding: 20px;
    border: 5px solid #CCC;
}

Visualizar Exemplo

Compare este exemplo com o anterior. As margens e bordas adicionaram à largura e altura do elemento. Esta é uma noção muito importante: quando trabalhamos com dimensões automaticamente definidas, as margens e bordas irão se adaptar às dimensões do elemento; se utilizamos largura e altura definidas, margens e bordas irão adicionar a estas dimensões.

Veja os parágrafos lado a lado para melhor comparação:

Visualizar Exemplo

Ter estas diferenças em mente é fundamental para construir um layout consistente e compatível com todos os navegadores. Na unidade "Trabalhando com Layout" iremos ver mais a fundo como aplicar estes conhecimentos ao nosso website.