Spazio tra div e img?

Question

Ho codice in questo modo:

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

C'è sempre 13px divario tra il div "sc" e img "separatore".

Margini e guarnizioni per entrambi sono impostati a 0, null, vuoto, nulla. Argh. Sono così arrabbiato; d

I stava cercando di capire cosa sta succedendo con Firebug, ma lo spazio tra di loro semplicemente non appartiene a nulla, non è un margine, non è un'imbottitura, che diamine?

No galleggia, non le impostazioni di visualizzazione, senza ereditato margini o imbottiture sia.

sbagliata di cosa con il mio codice? Ho cercato di eliminare gli spazi in HTML, ma non aiuta (a proposito se metto il separatore di sopra del div "sc" c'è anche un po 'di gap, ma più piccolo).

Grazie.

[AGGIUNTO]

Stili 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

Visualizza Aggiungi: block; all'immagine .separator.

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

Il problema è che le immagini a volte può aggiungere un po 'di spazio magico up / sotto di loro, ho questo problema ogni volta che sto lavorando con gli elementi di immagine come elementi *block*.

Answer 2

Ho avuto un divario 3px tra un'immagine e il tag div. Inoltre tutti gli stili sono stati fissati a 0. Davvero strano.

La correzione:

img {
   vertical-align: middle;
}

Questo ha funzionato benissimo per me.

Answer 3

In assenza di screenshot per fare riferimento a Io sono rimasto al buio su ciò che si desidera, quindi questo è tutto indovinare.

Sto indovinando da class="separator" che si sta tentando di rompere il contenuto con una linea orizzontale. Non dovresti utilizzare <hr /> con uno stile appropriato se questo è il caso?

In ogni caso, nota che gli elementi <p> hanno margini verticali impostato di default.

Non vedo il motivo per cui si desidera che il separatore fino allineata contro il testo, perché visivamente non ha senso per me.

Se davvero fare, c'è un sacco di opzioni:

1. Imposta margin-bottom: 0; sul <p>
2. Imposta margin-top: -*px; su .separator dove si sta assumendo si sta andando sempre di avere un diritto elemento prima del separatore con margine inferiore di *px
3. #sc p:last-child { margin-bottom: 0; } e href="http://code.google.com/p/ie7-js/" rel="nofollow"> IE9.js per lasciare più vecchie versioni di Internet Explorer supportano it

Ma ribadisco; nessun margine tra il testo e un separatore non suona bene a me.

Answer 4

che è perché non v'è spazio vuoto tra i tag

fare:

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