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