DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die Eigenschaft line-height definiert den Abstand über und unter Inline-Elementen. Das heißt, Elemente, die auf display: inline oder display: inline-block gesetzt sind. Diese Eigenschaft wird am häufigsten verwendet, um den Durchschuss für Textzeilen festzulegen.
p {
line-height: 1.35;
}Die Eigenschaft line-height kann die Schlüsselwortwerte normal oder none sowie eine Zahl, eine Länge oder einen Prozentsatz annehmen.
Laut Spezifikation ist ein Wert von „normal“ nicht nur ein einzelner konkreter Wert, der auf alle Elemente angewendet wird, sondern berechnet sich zu einem „vernünftigen“ Wert, abhängig von der Schriftgröße, die auf das Element gesetzt (oder geerbt) ist.
Ein Längenwert kann mit jeder gültigen CSS-Einheit definiert werden (px, em, rem, etc.).
Ein Prozentwert ist die Schriftgröße des Elements multipliziert mit dem Prozentsatz. Zum Beispiel
In der obigen Demo haben die drei Absätze ihre Zeilenabstände auf 150%, 200% bzw. 250% eingestellt. Das Body-Element hat seine Schriftgröße auf 20px gesetzt. Das bedeutet, die berechneten Zeilenabstände für die Absätze sind 30px, 40px bzw. 50px.
Einheitenlose Zeilenabstände
Die empfohlene Methode zur Definition des Zeilenabstands ist die Verwendung eines Zahlenwerts, der als „einheitenloser“ Zeilenabstand bezeichnet wird. Ein Zahlenwert kann jede Zahl sein, einschließlich einer Dezimalzahl, wie im ersten Codebeispiel auf dieser Seite verwendet.
Einheitenlose Zeilenabstände werden empfohlen, da Kindelemente den Rohzahlwert erben und nicht den berechneten Wert. Dadurch können Kindelemente ihre Zeilenabstände basierend auf ihrer berechneten Schriftgröße berechnen, anstatt einen beliebigen Wert von einem übergeordneten Element zu erben, der wahrscheinlich überschrieben werden muss.
Browser-Unterstützung
IE6/7 berechnet den Zeilenabstand bei ersetzten Elementen (z. B. Formularsteuerelementen), die inline sind, falsch.
Ich habe nie verstanden, was ein einheitenloser Zeilenabstand tatsächlich bedeutet. Ich habe ihn immer als Prozentsatz in Dezimalform betrachtet, aber ich weiß, dass er es nicht ist.
1,5 ist nicht dasselbe wie 150 %.
Was ist Zeilenabstand? Prozentualer Wert, Pixelwert?
Was ist die Formel, um einen Zeilenabstand einer gegebenen Höhe zu nehmen und dessen neue Höhe basierend auf einem einheitenlosen Zeilenabstand zu ermitteln?
Hier ist die Antwort https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
`CSS bietet eine weitere Messmethode, die spezifisch für den Zeilenabstand ist, und das ist einfach
eine Zahl. Sie schreiben es so
line-height: 1.5;
Nach diesem Wert steht keine Einheit (wie em oder px). Der Browser multipliziert diese Zahl mit der Schriftgröße, um den Zeilenabstand zu ermitteln. Wenn der Text also 1em ist und der Zeilenabstandswert 1,5 beträgt, dann ist der berechnete Zeilenabstand 1,5em. In den meisten Fällen ist der Effekt nicht anders, als einen Wert von 1,5em oder 150 % anzugeben. Aber manchmal ist dieser Multiplikationsfaktor nützlich, insbesondere da verschachtelte Tags den Zeilenabstandswert ihrer Eltern erben.
Wenn Sie beispielsweise die Eigenschaft line-height des Tags auf 150 % setzen. Alle Tags innerhalb der Seite würden diesen Wert erben. Allerdings wird nicht der Prozentsatz geerbt, sondern der berechnete Zeilenabstand. Wenn also die Schriftgröße für die Seite auf 10 Pixel eingestellt ist; 150 Prozent von 10 sind 15 Pixel. Jeder Tag würde einen Zeilenabstand von 15 Pixeln erben, nicht 150 Prozent. Wenn Sie zufällig einen Absatz mit großem, 36 Pixel hohem Text hätten, wäre sein Zeilenabstand – 15 Pixel – viel kleiner als der Text, wodurch die Zeilen in einem schwer lesbaren Durcheinander zusammengepresst würden.
In diesem Beispiel könnten Sie anstelle eines Zeilenabstands von 150 %, der auf das Tag angewendet wird, allen Tags denselben grundlegenden proportionalen Zeilenabstand geben, indem Sie den Zeilenabstand auf 1,5 setzen. Jeder Tag multipliziert stattdessen, anstatt einen genauen Pixelwert für den Zeilenabstand vom Body-Stil zu erben, seine Schriftgröße mit 1,5. Im obigen Beispiel eines Absatzes mit 36-Pixel-Text wäre der Zeilenabstand also 1,5 x 36 oder 54 Pixel.
Also… tatsächlich entspricht dieser einheitenlose Wert einem Prozentsatz (laut MDN)
font-size: 10px;
line-height: 1.2; /* 12px /
line-height: 1.2em; / 12px /
line-height: 120%; / 12px */
Es ist alles gleich.
Also, am Ende hattest du Recht, Kerl.
line-height: none meldet einen ungültigen Wert in Chrome
Weder MDN noch W3C erwähnen none als gültigen Wert für line-height
Ich habe es im W3C Arbeitsentwurf gefunden, der als spezielle Eigenschaft erwähnt wird.
Ich kann den Wert "none" nur in einer fast 15 Jahre alten Spezifikation finden
https://www.w3.org/TR/2002/WD-css3-linebox-20020515/#line-height
Eric Meyer erklärte es in seinem Buch Smashing CSS, 2011. Einige interessante Dinge unter: http://meyerweb.com/eric/css/tests/
Hallo Kelly,
Ich möchte wissen, welche gute Seite es gibt, um JS-Frameworks und andere Webtechnologien zu lernen, die derzeit beliebt sind und das Geschäft betreiben. Könnten Sie mir bitte helfen, da ich ein erfolgreicher Webentwickler werden möchte. Bitte teilen Sie mir den besten Weg mit, um zu beginnen.
Ich warte auf Ihre Antwort.
Vielen Dank
Ich weiß nicht
Wie erstelle ich einen Container mit Inline-CSS und wie definiere ich Breite und Höhe eines Containers in Inline-CSS
Nun, Sie können ein Span-Tag für einen Container verwenden, aber nach meinem Wissen können wir Breite und Höhe eines Inline-Containers nicht einstellen, da Inline-Elemente nur den Platz einnehmen, der von seinen Tags umschlossen wird. Deshalb gibt es Div (Block-Level) Elemente für Container.