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.
body { margin: 0px; }body { margin: 10px; }.topNoMargin { margin: -10px -10px 0px -10px; }
© 2003-2020, Márcio d'Ávila, mhavila.com.br, direitos reservados. O texto e c�digo-fonte apresentados podem ser referenciados, distribu�dos 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.