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