Faixa de título sem margem

Leituras: 3363 -

---

Título margem comum

Documento inteiro com margem padrão, inclusive o título.

Tem sido uma prática comum de projeto visual na web a diagramação de página que tem uma barra de título como uma faixa inteiriça, colorida ou com uma imagem de fundo preenchendo toda a largura em uma faixa superior da página. Porém, a margem padrão do corpo do documento, que deixa uma ligeira distância entre o conteúdo e os limites da janela, parece incomodar os diagramadores, que preferem que a barra de título preencha a área totalmente, ficando encostada nos limites da janela acima, à esquerda e à direita.

Título modo errado

Documento inteiro sem margem, título e corpo do texto.
no nono ixl no nono xi no nono xi no ni nono ixl no nono xi no nono ixl no ni nono xi no nono xi no.

Para atingir tal efeito, é comum encontrarmos páginas onde é definido um estilo de formatação que zera toda a margem do documento. O efeito colateral na maioria das vezes é grave para a legibilidade e apresentação do conteúdo da página: tudo que vem após o título também perde a margem lateral, ficando tudo "colado" com os limites laterais da janela. Não raro também é ver esse equívoco ser resolvido com outro, em cadeia: envolver todo o conteúdo após o título em uma tabela ou divisão e definir uma margem ou afastamento extra para este novo bloco, como compensação.

Título sem margem correto

Apenas título com as margens superior, esquerda e direita eliminadas (negativas), restante do documento com uma margem adequada.
no nono ixl no nono xi no nono xi no ni nono ixl no nono xi no nono ixl no ni nono xi no nono xi no.

A margem padrão para o corpo do documento não existe à toa. Ela é importante para a legibilidade, de forma que o conteúdo não fique embolado com os limites da janela. Além disso, englobar quase todo o conteúdo de uma página em um bloco, além de complicar a estrutura do HTML da página, em geral exige que o browser carregue até o fim do documento (onde encontrará o fim do bloco) para só então conseguir exibir o conteúdo todo de uma vez, ao invés de ir exibindo conteúdo à medida que vai carregando a página.

A solução mais adequada é eliminar a margem apenas onde ela não é desejada: no título. Para isso, basta definir explicitamente uma margem razoável para o corpo do documento (body) e então definir um estilo com margens negativas no mesmo valor para as margens superior, esquerda e direita da área de título do documento. Esse estilo pode estar aplicado ao elemento h1 ou mesmo em uma divisão (div) que agrupe os elementos que compõem a região de título da página. O valor negativo (direção oposta) neutraliza a margem do documento e com isso a região de título chega até os limites laterais e superior da janela, sem prejudicar a margem do restante do documento.

Errado:

Definir um estilo de margem zero para todo o corpo do documento:
body { margin: 0px; }
E eventualmente englobar o conteúdo após o título em uma tabela ou bloco adicionando uma margem extra.

Correto:

Definir uma margem razoável para o corpo do documento (por exemplo, 10 pixels) e neutralizar o espaço lateral e superior apenas na região de título, definindo para ela um estilo com margens superior, esquerda e direita negativas, no mesmo valor da margem do documento:
body { margin: 10px; }
.topNoMargin { margin: -10px -10px 0px -10px; }

---

© 2003-2005, Márcio d'Ávila, mhavila.com.br, todos os direitos reservados. O texto e código-fonte apresentados podem ser referenciados e utilizados, desde que expressamente citada esta fonte e o crédito do(s) autor(es). A informação aqui apresentada, apesar de todo o esforço para garantir sua precisão e correção, é oferecida "como está", sem quaisquer garantias explícitas ou implícitas decorrentes de sua utilização ou suas conseqüências diretas e indiretas.