Der Raum zwischen div und img?

Question

Ich habe Code wie folgt:

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

Es gibt immer 13px Lücke zwischen dem "sc" div und "Separator" img.

Die Margen und Polsterungen für beide auf 0 gesetzt, null, leer, nichts. Argh. Ich bin so verrückt; d

Ich habe versucht, um herauszufinden, was los ist mit Firebug, aber der Raum zwischen ihnen einfach nicht, gehört zu alles, es ist kein Spielraum, kein Polster, was zum Teufel?

Nein Schwimmern, keine Anzeigeeinstellungen, nicht geerbt Ränder oder Polsterungen auch nicht.

Was ist falsch mit meinem Code? Ich habe versucht, die Leerzeichen in HTML zu löschen, aber nicht hilft (übrigens, wenn ich den Separator über dem „sc“ div setze es gibt auch einige Lücken, aber kleiner).

Danke.

[ADDED]

CSS-Stile:

.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

Add-Anzeige: Block; zum .separator Bild.

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

Das Problem ist, dass Bilder manchmal ein wenig Magie Raum hinzufügen können, nach oben / unten sie, ich habe dieses Problem, wenn ich mit Bildelementen als *block* Elemente arbeitete.

Answer 2

hatte ich eine 3px Lücke zwischen einem Bild und div-Tag. Auch wurden alle Stile auf 0 gesetzt Wirklich seltsam.

Das Update:

img {
   vertical-align: middle;
}

Dieses wunderschön für mich gearbeitet.

Answer 3

Wenn keine Screenshots siehe ich im Dunkeln gelassen bin, was Sie wollen, so ist dies alles zu erraten.

Ich vermute, aus class="separator" dass Sie versuchen, Ihre Inhalte mit einer horizontalen Linie zu brechen. Sollten Sie nicht <hr /> mit entsprechendem Styling verwenden, wenn das der Fall ist?

In jedem Fall beachten Sie, dass <p> Elemente vertikale Ränder voreingestellt.

Ich verstehe nicht, warum Sie das Trenn bis dicht an dem Text wollen, weil es nicht visuell keinen Sinn für mich machen.

Wenn Sie wirklich tun, gibt es eine Reihe von Optionen:

1. Set margin-bottom: 0; auf der <p>
2. Set margin-top: -*px; auf .separator wo Sie gehen davon aus du wirst immer ein Element Recht haben, vor dem Separator mit Unterrand von *px
3. #sc p:last-child { margin-bottom: 0; } und IE9.js für ältere Versionen von Internet Explorer lassen unterstützt es

Aber ich wiederhole; kein Spielraum zwischen Text und einem Separator klingt nicht richtig für mich.

Answer 4

Das ist, weil es Leerzeichen zwischen den Tags ist

tun:

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