Javascript-Zeilenhöhe

| | | | | | | | | | | | | | | | | | | | | | | | | |

Die CSS-Eigenschaft line-height bestimmt die Zeilenhöhe verschiedener HTML-Elemente. Es wird häufig verwendet, um den Abstand zwischen Textzeilen festzulegen. Eine Zeilenhöhe kann mithilfe von Schlusselwörtern, Prozentsätzen oder numerischen Werten festgelegt werden.

Mit der CSS-Eigenschaft line-height können Entwickler den Abstand zwischen zwei Inline-Elementen auf einer Webseite definieren. Entwickler verwenden häufig die CSS-Eigenschaft line-height, um den Abstand zwischen Textzeilen auf einer Webseite zu erhöhen oder zu verringern.

In diesem Tutorial wird die Verwendung der CSS-Eigenschaft line-height erläutert. Wir verweisen auf ein Beispiel, um Ihnen den Einstieg zu erleichtern. Am Ende dieses Tutorials sind Sie ein Meister darin, die Eigenschaft line-height in Ihrem Code zu verwenden.

CSS line-height

Die CSS-Eigenschaft line-height setzt die Höhe einer Linienbox. Zeilenboxen sind die Zeilen, aus denen eine Box in CSS besteht. Diese Methode wird häufig verwendet, um den Abstand zwischen Textzeilen festzulegen.

Durch die Anpassung der Zeilenhöhe können Sie den Abstand zwischen Textzeilen (oder anderen Elementen) auf einer Webseite indirekt anpassen. Dies ist vergleichbar mit der Formatierung von Text in Microsoft Word mit doppeltem Abstand oder 1,15-Abstand.

Die Syntax fur die CSS-Eigenschaft line-height lautet wie folgt:

"lineHeight‚" bezieht sich auf einen L√§ngenwert, der die Zeilenh√∂he eines Elements festlegt.

Drei Arten von Werten, die Sie mit der line-height-Eigenschaft verwenden können, sind Länge, Zahl und Prozentsatz:

WertBeschreibungBeispielwerteErgebnis von Beispielwerte
LängeLegt die Zeilenhöhe mit einer bestimmten Maßeinheit fest (z. B. em, px und cm).10px, 15px, 20pxWenn Sie 10px angeben, beträgt Ihre Zeilenhöhe 10px.
ZahlLegt die Zeilenhöhe auf a . fest Vielfaches der Schriftgröße. 1, 1,8, 2Wenn Ihre Schriftgröße 10 Pixel beträgt, beträgt Ihre Zeilenhöhe 10 Pixel, 18 Pixel bzw. 20 Pixel.
ProzentsatzLegt die Zeilenhöhe als Prozentsatz der Schriftgröße des Elements fest.30%, 50% , 110 %Wenn Ihre Schriftgröße 10 Pixel beträgt, beträgt Ihre Zeilenhöhe 3 Pixel, 5 Pixel bzw. 11 Pixel.

Alternativ k√∂nnen Sie das Schlusselwort "normal‚" angeben. Dieses Schlusselwort gibt die Verwendung des Browser-Standards an. Dieser Wert liegt normalerweise bei 1,2, je nach Browser des Betrachters verwendet.

Wenn Sie die line-height-Eigenschaft auf ein Feld anwenden, verwendet der gesamte Text in diesem Feld die von Ihnen angegebene Zeilenhöhe.

Ein Hinweis zur Barrierefreiheit

Das Ändern des Zeilenabstands ist eine gängige Verwendung der line-height-Eigenschaft. Dies liegt daran, dass Sie immer sicherstellen möchten, dass genugend Abstand zwischen den Zeilen vorhanden ist. Wenn nicht genugend Abstand zwischen den Zeilen vorhanden ist, kann es schwierig sein, Text zu lesen.

Text, der schwer zu lesen ist, hat besonders schwerwiegende Auswirkungen auf Menschen mit Sehbehinderungen. Barrierefreiheit sollte beim Erstellen einer Website immer berucksichtigt werden.

Wenn Sie’ wieder eine Zahl verwenden Um die Zeilenhöhe eines Elements in CSS festzulegen, sollten Sie keine Werte kleiner als 1,5 verwenden. Dies liegt daran, dass Werte unter 1,5 fur die Zeilenhöhe sehbehinderten Lesern die Nutzung Ihrer Website erschweren können.

line-height CSS-Beispiel

Angenommen, wir entwerfen ein &ldquo ;√úber uns‚" Seite fur die Website eines lokalen Kochclubs. Die Seite enth√§lt eine √úberschrift, gefolgt von einem Textabschnitt mit einer Beschreibung des Clubs.

Wir möchten, dass unser Text richtig verteilt ist. Daher beschließen wir, die Zeilenhöhe des Textabsatzes auf der Webseite auf 1,6 Rem zu setzen. Dies können wir mit diesem Code tun:

Unser Code gibt Folgendes zuruck: Klicken Sie auf das’Bild Schaltfl√§che im Code-Editor oben, um die Ausgabe unseres HTML/CSS-Codes anzuzeigen.

In unserer HTML-Datei haben wir ein "√úber uns‚" -Header mit einem

Schild. Dann haben wir eine Beschreibung von Fantastic Chefs geschrieben und diese Beschreibung in HTML

Tags.

In unserer CSS-Datei haben wir eine Regel definiert. Unsere Regel verwendet zwei CSS-Eigenschaften. Wir setzen die Zeilenhöhe auf 1,6rem und die Schriftgröße auf 16px fur alle

-HTML-Tags.

Die Ma√üeinheit "rem‚", die wir mit der Eigenschaft line-height verwendet haben, legt eine Zeilenh√∂he relativ zur Schriftgr√∂√üe des Root-Elements fest. "rem‚" steht fur "root-Element.‚" Schriftgr√∂√üe war 16px, unsere Zeilenh√∂he fur diesen Textabsatz war 25,6px (16px * 1,6).

Der Text im obigen Absatz ist ausreichend beabstandet und uberlappt nicht.

Wir könnten unsere line-height auch auf unser -Tag auf die von uns angegebenen Werte setzen title und unser

-Tag wären davon betroffen.

Schlussfolgerung

Das CSS line-hei ght-Eigenschaft legt die Höhe eines Linienrahmens fest. Normalerweise wird diese Eigenschaft verwendet, um den Abstand zwischen den Textzeilen in einem Absatz oder einer Überschrift festzulegen. Die Zeilenhöhe kann mit dem normalen Schlusselwort, einem Prozentsatz, einer Länge oder einem numerischen Wert festgelegt werden.

Dieses Tutorial behandelt die Grundlagen der CSS-Eigenschaft line-height und wie Sie sie in Ihrem . verwenden können Code. Jetzt verfugen Sie uber das nötige Wissen, um die CSS-Eigenschaft line-height wie ein Experte zu verwenden!

Sie möchten Webentwickler werden? In unserem Leitfaden zum Erlernen von CSS finden Sie Expertentipps und Anleitungen zu den wichtigsten Lernressourcen und Kursen.