nicht angemeldet
Salut Gunther,
Deshalb mal eine vereinfachte Antwort: Eine line-height Angabe für non-replaced Inline-Elemente macht sich nur dann bemerkbar, wenn der (berechnete) Wert mind. größer als der größte Wert für font-size ist, bzw. wenn der (berechnete) Wert mind. größer ist, als der gesetzte oder ererbte Wert für line-height des zugehörigen Block-Container Elements.
Dein Quellcode ist semantisch gesehen alles andere als korrekt. Es genügt auch nicht, wenn man in der Doctype-Angabe HTML5 festlegt, im übrigen Dokument dann aber alle Grundlagen der gewählten Sprache außer Acht lässt (u.a. die speziellen Elemente der Sprache, die sprechspezifischen Besonderheiten wie bspw. das "Outline-Konzept").
Firebug bietet u.a. die Möglichkeit, per Cursor auf der Seite ein bestimmtes Element auszuwählen. Das kann man auch hervorragend dafür nutzen, um festzustellen, welcher Bereich einer Seite zu welchem Element gehört.
Wenn du das bei deinem "Problem" mal machst, wirst du feststellen, dass der Bereich zwischen den Textzeilen deiner Span-Elemente (den du ja verkleinern willst) nicht zu dem jeweiligen Span-Element, sondern zu dem übergeordneten P-Element gehört. Somit sollte eigentlich auch klar sein, wo man ansetzen muss, um das gewünschte Ziel zu erreichen.
Ich glaub, ich hab es jetzt einigermassen geschafft, die Elemente so zu schreiben, dass ich line height für jedes Element separat definieren kann.
Also nach meinem Dafürhalten ist es beiden Versionen gleich. Firebug bietet ebenfalls eine sehr nützliche Funktion, die die jeweiligen Werte für ein Element im Bezug auf das Layout anzeigt - zu finden unter dem Reiter "Layout".
bei mir war es heute auch nicht mehr verschieden, weiss nicht weshalb es vorher so war.
Wenn du jetzt einmal auf eines deiner Div-Elemente mit der Klasse 'kleinbild' gehst, das Padding mal deaktivierst und dir dann im Layout die Abmessungen anguckst, wirst du feststellen, dass das Div-Element eine Abmessung von 200 x 107 Pixeln hat, obwohl das enthaltene Bild nur 200 x 100 Pixel groß ist.
Woran liegt das? Richtig - u.a. an der line-height des Div-Elements! ;-)
Probiere rein zu Testzwecken folgendes:
- Füge bei .kleinbild in deinem CSS die Eigenschaft
line-height: 0;hinzu
das habe ich nun gemacht, sieht gut aus.
- Füge dem Image-Element die Eigenschaft 'http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#vertical_align@title=vertical-align' hinzu, teste die unterschiedlichen Werte dafür und schau' dir die das jeweilige Ergebnis an! Ganz wichtig dabei: Verstehe warum welche Methode/ Variante zu dem jeweiligen Ergebnis führt.
ich kenne diese Funktion, aber hier stelle ich keine Veränderung fest.
Unterm Strich bleibt halt, dass CSS doch sehr komplex ist, alleine schon die "Wechselwirkungen & Beeinflussungen" der einzelnen Eigenschaften. Und ohne ein gewisses Grundwissen über diese Zusammenhänge ist es schwierig, die gewünschten Resultate auf "bestmöglichste" Art & Weise zu erzielen. Es hilft also alles nichts - man muss sich dieses Grundwissen zuerst mal aneignen (anlesen). Und das dauert IMHO mehr als nur ein paar Tage.
deshalb bin ich dankbar um Hilfe von erfahrenen Designern, wenn meine Logik nicht mehr reicht. Damit schliesse ich dieses Posting und danke Dir bestens für deine Ausführungen.
Mit bestem Dank,
bari.