Como eliminar os espaços mortos entre DIVs

Escrito por max power | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como eliminar os espaços mortos entre DIVs
O bug do espaço vazio pode dar grandes dores de cabeça aos designers web (Comstock/Comstock/Getty Images)

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.

Nível de dificuldade:
Moderadamente fácil

Outras pessoas estão lendo

Instruções

  1. 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.

  2. 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. 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. 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. 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;}

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível