HTML: Zeilenhöhe einstellen – So gehts

Ad

Wenn du in HTML von einem Absatz oder einem Text die Zeilenhöhe bzw Zeilenabstand einstellen willst dann kannst du das mit CSS machen. Der Befehl dafür heist line-height:px.

HTML: Zeilenhöhe einstellen

Der Standard Wert bei vielen Browsern ist line-height:1.2

CSS
.text{
line-height:1.2;
}

Ergebnis

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

Beispiel: line-height:2.5

Je höher der Wert desto weiter ist der Zeilenabstand bzw. Zeilenhöhe

CSS
.text{
line-height:2.5;
}

Ergebnis

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

Beispiel: line-height:4

Hier ein Beispiel mit der Zeilenhöhe 4 du siehst gleich den Unterschied

CSS
.text{
line-height: 4 ;
}

Ergebnis

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam

Allgemeine Infos zu line-height in CSS

  • Die Eigenschaft line-height wird vererbt, d.h. sie wird von allen Elementen innerhalb eines Elements übernommen, für das sie definiert wurde, es sei denn, sie wird in einem untergeordneten Element explizit überschrieben.
  • Die Verwendung von relativen Werten (Verhältnis oder Prozent) für die Zeilenhöhe kann die Lesbarkeit und Zugänglichkeit des Texts verbessern, da sie sich an die Größe der Schriftgröße und des übergeordneten Elements anpasst.
  • Die Eigenschaft line-height kann in Kombination mit anderen Eigenschaften wie font-size und font-family verwendet werden, um ein einheitliches und ansprechendes typografisches Design zu erstellen.

    html        html keine umlaute   

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?