on-load-remove-class="default-font">
×
Loading ...

Como eliminar os espaços mortos entre DIVs

Atualizado em 03 abril, 2017

Os designers web usam regras de Folhas de estilo em cascata (CSS) para criar as páginas web. As regras permitem que o designer defina e manipule blocos de conteúdo, conhecidos como "divs". O problema conhecido como o "bug do espaço morto" aparece quando o designer tenta colocar dois divs lado a lado, mas aparece um espaço vazio entre eles. Felizmente, é possível usar regras CSS para eliminá-lo ou escondê-lo.

Instruções

O bug do espaço vazio pode dar grandes dores de cabeça aos designers web (Comstock/Comstock/Getty Images)
  1. Analise as configurações das margens de cada div problemático. Certifique-se de que ambos não o estejam criando por causa desses valores. A margem de cada div é colocado por fora dele. Se for o seu caso, a imagem ou cor de fundo do div pai pode aparecer através da margem e criar um efeito de espaço vazio. A solução pode ser tão fácil quanto definir o valor das margens em zero.

    Loading...
  2. Defina configurações uniformes de margens e espaçamento (padding) para todos os blocos. Os diferentes navegadores aplicam diferentes valores padrão a esses parâmetros, fazendo com que a margem produza um efeito indesejado no navegador e não em outros. Ao definir regras padrão em CSS, você poderá eliminar essa incerteza em qualquer navegador.

    O conjunto de regras CSS que permite padronizar as configurações dos blocos é o seguinte:

    html, body {margin: 0; padding: 0;} p {margin 0 0 3px 0; padding: 0;} h1, h2, h3, h4, h5, h6 {margin 0 0 2px 0; padding: 0;} form {margin 0; padding: 0;}

  3. Coloque conteúdo no seu div. Alguns navegadores podem não exibir um div que não tenha nada dentro, mesmo com uma imagem de fundo. Se o seu div não tiver conteúdo, o navegador pode reduzir o tamanho dele, deixando um espaço vazio. Para consertar esse problema, considere inserir um arquivo GIF transparente. Isso dará ao navegador conteúdo que poderá reconhecer, sem alterar a impressão visual que você quer criar.

  4. Aninhe os divs em um elemento div pai que os controlará. Defina a cor de fundo deste com o valor desejado ou use uma imagem que cubra todo o espaço vazio e combine com o design do site.

  5. Revise as configurações de alinhamento. Os divs com um tipo de alinhamento "inline" podem tender a adicionar pixels em cima e embaixo para permitir variações de texto, pois esse valor é usado frequentemente para alinhamento de texto. Em vez disso, defina o valor "display" em "block" e posicione os divs usando a propriedade "float". Por exemplo:

    parentDiv {

    display: block;}

    childDiv1 {

    float: left;}

    childDiv2 {

    float: left;}

Loading...

Referências

Loading ...
Loading ...