html - tipos - ¿Espacio entre div e img?

tipos de etiquetas html

Question

Tengo un código como este:

        <div id="sc">  
            <h1>1. Orange</h1>
            <p>some text in here </p>                                          
        </div>
        <img class="separator" src="images/separator.png" /> 

SIEMPRE hay un espacio de 13px entre el div "sc" y el img "separator".

Los márgenes y los rellenos para ambos se establecen en 0, nulo, vacío, nada. Argh. Estoy tan enojado; d

Estaba tratando de averiguar qué está pasando con Firebug pero el espacio entre ellos simplemente no pertenece a nada, no es un margen, no un relleno, ¿qué diablos?

Sin flotadores, sin configuración de pantalla, sin márgenes heredados ni rellenos.

¿Qué pasa con mi código? He estado tratando de eliminar el espacio en blanco en HTML, pero no ayuda (por cierto, si coloco el separador sobre la división "sc", también hay un espacio, pero más pequeño).

Gracias.

[ADICIONAL]

ESTILOS CSS:

.separator {
    margin: 0;
    padding: 0;
}

#sc {
    text-align: justify;
    padding: 0;
    margin: 0;
    background-image: url(''images/bg.png'');  
    background-repeat: repeat-y;
    width: 970px;
}

Answer 1

Sin capturas de pantalla para referirme, me quedo en la oscuridad sobre lo que quieres, así que todo esto es adivinar.

Supongo que, desde la class="separator" , está intentando dividir su contenido con una línea horizontal. ¿No debería estar usando <hr /> con el estilo adecuado si ese es el caso?

En cualquier caso, tenga en cuenta que los elementos <p> tienen márgenes verticales establecidos de forma predeterminada.

No veo por qué quieres que el separador se ajuste perfectamente a tu texto, porque visualmente no tiene sentido para mí.

Si realmente lo haces, hay un montón de opciones:

1. Establecer margin-bottom: 0; en el <p>
2. Establecer margin-top: -*px; en .separator donde asumes que siempre vas a tener un elemento justo antes del separador con un margen inferior de *px
3. #sc p:last-child { margin-bottom: 0; } #sc p:last-child { margin-bottom: 0; } y IE9.js para permitir que versiones anteriores de Internet Explorer lo admitan

Pero lo reitero; ningún margen entre el texto y un separador no me suena bien.

Answer 2

Tenía una brecha de 3px entre una imagen y una etiqueta div. También todos los estilos se establecieron en 0. Realmente extraño.

La solución:

img {
   vertical-align: middle;
}

Esto funcionó muy bien para mí.

Answer 3

eso es porque hay espacios en blanco entre las etiquetas

hacer:

</div><img class="separator" src="images/separator.png" /> 

Answer 4

Añadir display: bloque; a la imagen del separador.

.separator {
    margin: 0;
    padding: 0;
    display: block;
}

El problema es que las imágenes a veces pueden agregar un poco de espacio mágico arriba / debajo de ellas, tengo este problema cada vez que trabajo con elementos de imagen como elementos de *block* .