Espacio entre div y img?

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 13px brecha entre el div "sc" y img "separador".

márgenes y rellenos para ambos se establece en 0, null, vacío, nada. Argh. Estoy tan loco; d

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

Sin flota, no hay configuración de la pantalla, sin heredada márgenes o rellenos tampoco.

Lo malo de mi código? He estado tratando de eliminar el espacio en blanco en HTML, pero no ayuda (por cierto si pongo el separador por encima de la div "sc" También hay algo de distancia, pero más pequeño).

Gracias.

[AÑADIDO]

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

Mostrar Añadir: block; a la imagen .separator.

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

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

Answer 2

Yo tenía un hueco 3px entre una imagen y la etiqueta div. También todos los estilos se ponen a 0. Realmente extraño.

La solución:

img {
   vertical-align: middle;
}

Esto funcionó muy bien para mí.

Answer 3

Sin capturas de pantalla para referirse a que me queda en la oscuridad sobre lo que quiere, de modo que todo esto es adivinar.

supongo class="separator" de que usted está tratando de romper su contenido con una línea horizontal. ¿No deberías estar usando <hr /> con un estilo apropiado si ese es el caso?

En cualquier caso, cabe destacar que los elementos han <p> márgenes verticales establecido por defecto.

No veo por qué quiere el separador hasta encaje perfectamente en el texto, ya que visualmente no tiene sentido para mí.

Si realmente, hay un montón de opciones:

1. Conjunto margin-bottom: 0; en el <p>
2. margin-top: -*px; ubicado en .separator donde está asumiendo que siempre va a tener un derecho elemento antes del separador con el margen inferior de *px
3. #sc p:last-child { margin-bottom: 0; } y href="http://code.google.com/p/ie7-js/" rel="nofollow"> IE9.js por dejar que las versiones anteriores de Internet Explorer apoyarla

Pero reitero; sin margen entre el texto y un separador no suena bien para mí.

Answer 4

Eso es porque no es un espacio en blanco entre las etiquetas

do:

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