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.

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.

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.