Como remover espaços em branco entre Divs

Os designers da Web usam as regras do Cascading Style Sheets para criar páginas da Web. Essas regras permitem ao designer estabelecer e manipular os blocos de conteúdo conhecidos como Divs. Um problema, às vezes chamado de erro de espaço em branco, aparece quando o designer tenta colocar dois desses Divs um ao lado do outro, apenas para ver que a conseqüência é uma pequena faixa de espaço em branco indesejado entre os dois Divs. Felizmente, o designer pode usar regras CSS para remover ou ocultar esse espaço em branco.

Passo 1

Analise a configuração da margem para cada Div problemático. Verifique se as Divs em cada lado do espaço em branco não possuem configurações de margem que estão criando o espaço em branco. A margem de cada Div está na área externa. Se o seu tiver margem, a cor do plano de fundo ou a imagem do Div principal pode ser exibida na margem e criar o efeito de espaço em branco. A resolução é tão simples quanto definir a margem dos Divs com problemas em zero.

Etapa 2

Defina as configurações de margem e espaçamento uniformemente para todos os elementos do bloco. Navegadores diferentes aplicam opções de espaçamento e margem padrão diferentes em todos os elementos do bloco. A margem de um desses elementos de bloco pode ser responsável pelo efeito de espaço em branco indesejado em um navegador, além de ter um efeito diferente em outro navegador. Ao padronizar as propriedades de espaçamento e margem nos navegadores, você pode eliminar isso com segurança.

Um conjunto de regras CSS para executar a padronização da configuração do elemento de bloco pode aparecer da seguinte maneira:

html, corpo {margem: 0; padding: 0;} p {margem 0 0 3px 0; padding: 0;} h1, h2, h3, h4, h5, h6 {margem 0 0 2px 0; padding: 0;} forma {margem 0; padding: 0;}

Etapa 3

Coloque o conteúdo no seu Div. Alguns navegadores podem não exibir um Div que não tenha conteúdo, mesmo que tenha uma imagem de plano de fundo. Se o seu não tiver conteúdo, o navegador poderá reduzi-lo deixando um pequeno espaço em branco. Para resolver isso, considere inserir um arquivo GIF transparente no Div. Isso fornecerá um conteúdo que será reconhecido pelo navegador sem modificar a impressão visual que você deseja criar.

Etapa 4

Aninhe os Divs no elemento Div pai. Atribua um Div ou wrapper pai para proteger os dois Divs que causam o problema. Defina uma cor de plano de fundo para o elemento pai para obter uma cor ou imagem mais desejável que cubra o espaço em branco e se ajuste ao design do site.

Etapa 5

Revise as propriedades do alinhamento. As divs que possuem as configurações de alinhamento “embutido” (online) podem tender a adicionar pixels na parte superior e inferior do Div para criar modificações de texto, pois o parâmetro de alinhamento “embutido” é frequentemente usado para alinhamento de texto. Em vez de tentar unir os dois Divs usando a estratégia de alinhamento “inline”, basta reatribuir o alinhamento para “Lock” e coloque os Divs usando a propriedade de posicionamento “float” (flutuante). Aqui está um exemplo:

parentDiv {

display: bloco;}

childDiv1 {

float: esquerda;}

childDiv2 {

float: esquerda;}

Referências

 

Você pode estar interessado:

Deixe um comentário