Cómo eliminar los espacios en blanco entre Divs (En 5 Pasos)

Por max power
Cómo eliminar los espacios en blanco entre Divs (En 5 Pasos)
Comstock/Comstock/Getty Images

Los diseñadores web usan las reglas de Hojas de Estilo en Cascada para diseñar páginas web. Estas reglas permiten al diseñador establecer y manipular los bloques de contenido que se conocen como Divs. Un problema, a veces llamado error del espacio en blanco, aparece cuando el diseñador intenta colocar dos de estos Divs uno al lado de otro, sólo para ver que la consecuencia es una pequeña banda de espacio en blanco no deseado entre los dos Divs. Afortunadamente, el diseñador puede usar reglas CSS para eliminar u ocultar este espacio en blanco.

Paso 1

Analiza la configuración de margen para cada Div problemático. Asegúrate de que los Divs de cada lado del espacio en blanco no tengan configuración de margen que esté creando el espacio en blanco. El margen de cada Div está en la zona fuera de él. Si el tuyo tiene margen, entonces el color de fondo o imagen del Div padre puede mostrarse a través del margen y podría crear el efecto de espacio en blanco. La resolución es tan sencilla como poner el margen de los Divs con problemas en cero.

Paso 2

Define la configuración de margen y espaciado de forma uniforme para todos los elementos de bloque. Los distintos navegadores aplican distintas opciones de margen y espaciado predeterminadas en todos los elementos de bloque. El margen de uno de estos elementos de bloque puede ser el responsable del efecto de espacio en blanco no deseado en un navegador, mientras que tiene un efecto diferente en otro navegador. Estandarizando las propiedades de espaciado y margen en los navegadores puedes eliminar esto seguramente.

Un conjunto de reglas CSS para realizar la estandarización de la configuración de elementos de bloque puede aparecer de esta forma:

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

Paso 3

Coloca el contenido en tu Div. Algunos navegadores pueden no mostrar un Div que no tiene contenido, aunque tenga imagen de fondo. Si el tuyo no tiene contenido, el navegador puede reducirlo dejando un pequeño espacio en blanco. Para solucionar esto, considera insertar un archivo GIF transparente en el Div. Esto le dará contenido, que será reconocido por el navegador sin modificar la impresión visual que quieres crear.

Paso 4

Anida los Divs dentro del elemento del Div padre. Asigna un Div padre o envoltorio que custodie los dos Divs que provocan el problema. Pon un color de fondo al elemento padre para conseguir un color o imagen más deseable que cubrirá el espacio en blanco y encajará con el diseño del sitio.

Paso 5

Revisa las propiedades de alineación. Los Divs que tienen la configuración de alineación "inline" (en línea) pueden tender a añadir píxeles en la parte superior e inferior del Div para crear modificaciones del texto puesto que el parámetro de alineación "inline" suele usarse para la alineación de texto. En lugar de intentar unir los dos Divs usando la estrategia de alineación "inline", simplemente vuelve a asignar la alineación en "Bloqueo" y coloca los Divs usando la propiedad de colocación "float" (flotante). Aquí tienes un ejemplo:

parentDiv {

display: block;}

childDiv1 {

float: left;}

childDiv2 {

float: left;}