Cómo eliminar los espacios muertos entre DIVs | Artículos | anuncioclasificados.net

Cómo eliminar los espacios muertos entre DIVs



Los diseñadores web utilizan reglas de hojas de estilo en cascada (CSS) para crear las páginas web. Las reglas permiten que el diseñador defina y manipule bloques de contenido, conocidos como "divs". El problema conocido como el "error del espacio muerto" aparece cuando el diseñador intenta colocar dos divs lado a lado, pero aparece un espacio vacío entre ellos. Afortunadamente, es posible utilizar reglas CSS para eliminarlo o ocultarlo.

instrucciones

El error del espacio vacío puede dar grandes dolores de cabeza a los diseñadores web (Comstock / Comstock / Getty Images)
  1. Analice la configuración de los márgenes de cada div problemático. Asegúrese de que ambos no lo crean debido a estos valores. El margen de cada div es colocado por fuera de él. Si es su caso, la imagen o el color de fondo del div padre puede aparecer a través del margen y crear un efecto de espacio vacío. La solución puede ser tan fácil como definir el valor de los márgenes en cero.

  2. Establezca configuraciones uniformes de márgenes y espaciado para todos los bloques. Los diferentes navegadores aplican diferentes valores predeterminados a estos parámetros, haciendo que el margen produzca un efecto no deseado en el navegador y no en otros. Al definir reglas predeterminadas en CSS, puede eliminar esta incertidumbre en cualquier navegador.

    El conjunto de reglas CSS que permite estandarizar las configuraciones de los bloques es el siguiente:

    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. Coloca contenido en tu div. Algunos navegadores pueden no mostrar un div que no tenga nada dentro, incluso con una imagen de fondo. Si su div no tiene contenido, el explorador puede reducir su tamaño, dejando un espacio vacío. Para solucionar este problema, considere la inserción de un archivo GIF transparente. Esto le dará al navegador contenido que podrá reconocer, sin cambiar la impresión visual que desea crear.

  4. Anije los divs en un elemento div padre que los controlará. Defina el color de fondo de éste con el valor deseado o utilice una imagen que cubra todo el espacio vacío y se adapte al diseño del sitio.

  5. Revise la configuración de alineación. Los divs con un tipo de alineación "en línea" pueden tender a agregar píxeles arriba y abajo para permitir variaciones de texto, ya que este valor se utiliza a menudo para la alineación de texto. En su lugar, defina el valor "display" en "block" y coloque los divs usando la propiedad "float". Por ejemplo:

    parentdiv {

    display: block;}

    childdiv1 {

    float: left;}

    childdiv2 {

    float: left;}

Artículo Anterior

Cómo hacer un micrófono de cinta con papel de aluminio

Artículo Siguiente

Cómo hacer una estrella en un pedazo de papel