nicht angemeldet
Hallo bari!
ich komme nochmals auf das Problem der line-height zurück. Ist es nicht möglich, in einem p-Element mit einer gegebenen line-height ein span-Element mit einer anderen line-height zu haben ? Vererbt das p-Element das 1:1 weiter?
Deine Frage zeigt deutlich, dass du noch gar nicht verstanden hast, was 'line-height' eigentlich bedeutet und welche Auswirkungen bestimmte Werte dafür auf die verschiedenen Elemente haben.
Dir hier jetzt aber das komplette "Visual formatting model" mit all seinen Fein- & Besonderheiten zu erklären, würde den Rahmen sprengen.
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.
P. S. habe die 99 slides, von Gunther empfohlen, durchgelesen, aber, wie mir scheint, hilft das mir nichts, oder hab ich was übersehen?
Ja, jede Menge wie mir scheint - insbesondere die Seiten 81 ff.
Zu sehen ist es hier.
Wo genau?
du musst dann den Firebug öffnen und auf das erste (oder ein) Element der Kleinbilder gehen (im blauen Block unten), das ganze div heisst .beispiele. In diesem div befinden sich ein div mit dem Bild (dazu noch 1 Frage unten), dann folgt ein p mit dem Titel (des Beispiels) in einem span (ich möchte das später durch h3 ersetzten, da ich damit ein br sparen kann) mit font-size 16px, dann darunter das span-Element mit der Klasse .kleintext und font-size 14px, und diesen Kleintext kann ich nicht näher zusammenliegend machen.
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.
heisst das, dass ich besser (überall) absolute Einheiten für die Schriftgrösse angeben soll, also px ?
Auch die Frage zeigt wieder, dass du die dir verlinkten Artikel/ Referenzen entweder gar nicht erst liest, oder zumindest nicht verstehst, was dort geschrieben steht.
Hier noch eine weitere Quelle: https://developer.mozilla.org/en-US/docs/CSS/line-height#Notes
Zur Frage zum div .kleinbild: in allen deutschen Beispielen ist da ein unterer Rand von ca 5px neben dem geschriebenen padding: 5px (gut zu sehen, wenn du das div .kleinbild im firebug-html-Teil angehst, violett angezeigter Rand rundherum und zusätzlich noch einen hellen unteren Rand zwischen Bild und padding-rand). Bei den russischen Seiten tritt das nicht auf. Ich fand bisher nicht heraus weshalb, woher das kommt.
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".
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:
1. Füge bei .kleinbild in deinem CSS die Eigenschaft line-height: 0; hinzu
oder
2. 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.
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.
Gruß Gunther