Archiv der Kategorie: html

So passen Sie den Zeilenabstand korrekt an

Bei der Codierung von HTML-Seiten für eine Website ist der Zeilenabstand des Textinhalts wahrscheinlich eines der Attribute, das normalerweise als Standard beibehalten wird. Meistens denkt man nicht einmal darüber nach und der Standard funktioniert am besten. Der Zeilenabstand oder die Zeilenhöhe ist die vertikale Höhe zwischen Textzeilen in einer gerenderten HTML-Seite. Fast immer wird dieser Abstandswert vom Browser oder der Rendering-Engine auf einen entsprechenden Wert gesetzt. Dieser Wert ist in der Regel unter anderem abhängig von der Schriftart der gerenderten Seite.

Codierung von HTML-Seiten

Einen Artikel erfolgreich und richtig formatieren

Allerdings muss es selten geändert werden, ab und zu gerät man in Situationen, in denen man diese Eigenschaft ändern möchte. Sie werden feststellen, dass die von Ihnen verwendete Schriftart standardmäßig entweder zu wenig oder zu viel Zeilenhöhe erzeugt. Es kann auch eine Sonderanforderung sein, z.B. müssen die Linien zur Betonung mehr als sonst getrennt werden. Um den HTML Abstand zwischen Wörtern zu verändern, gibt es verschiedene Möglichkeiten. Zuerst einmal wollen wir sehen, was der Standard ist, der von den meisten Browsern verwendet wird. In den meisten modernen Browsern ist der Zeilenabstand in der Regel entweder auf 110% oder 120% der Pixelgröße oder Schriftgröße eingestellt. Dies funktioniert in fast allen Fällen hervorragend, so dass der Text lesbar genug ist. Um den Zeilenabstand zu ändern, verwenden Sie in der Regel das Cascading Style Sheet (css). Die css-Eigenschaft, die dies behandelt, heißt line-height.

Sie können den Wert für die Zeilenhöhe genauso angeben, wie Sie jede andere Größe in Css angeben würden, entweder als Zahl, Pixelgröße oder in Prozent. Wie bei jedem anderen Stil können Sie sie auf jeder Tag-Ebene mit Hilfe einer der CSS-Techniken angeben. Du kannst es bei Bedarf auch inline einbauen. In diesem Beitrag werden wir das Style-Attribut des p-Tags als Beispiel verwenden, aber du kannst es auch in anderen Tags wie body, span oder div verwenden.

Verwendung relativer Zahlen

Wenn Sie die Werte als Zahl angeben, basiert sie auf der aktuellen Schriftgröße als Basis. Die aktuelle Schriftgröße wird mit der Zahl multipliziert, die Sie angeben, um die Zeilenhöhe oder den Zeilenabstand zu berechnen.

<p style=“line-height:1.4″>
Inhalt des Absatzes hier
</p>

Sie können auch andere Methoden zur Angabe der Werte verwenden, wie em, rem, pt usw. Als Beispiel wollen wir sehen, wie man px oder Pixelgröße verwendet.

Verwendung der Pixelgröße

Sie können die Zeilenhöhe auch über die Pixelgröße festlegen. Dadurch wird der Abstand unabhängig von der verwendeten Schriftart, was nicht immer eine gute Idee ist.

<p style=“line-height:16px“>
Inhalt des Absatzes hier
</p>

Verwendung von Prozentsätzen

Wenn Sie Prozentsätze verwenden, funktioniert es ähnlich wie bei der Verwendung der Zahlen. Sie basiert auf der aktuellen Schriftgröße des Elements. Der Prozentsatz ist eigentlich eine andere Art der Spezifikation.

<p style=“line-height:134%“>
Der Absatzinhalt hier hat nun einen Abstand, der 1,34 entspricht.
</p>

Wenn Sie die Höhe reduzieren wollen, dann würden Sie einen Wert verwenden, der kleiner als 100% (oder kleiner als 1 in der Zahlenmethode) ist. Ein Beispiel wäre

<p style=“line-height:85%“>
Der Absatzinhalt hier hat einen Abstand, der 0,85 entspricht.
</p>

Wie zu erwarten ist, sind negative Werte in der Eigenschaft Zeilenhöhe nicht erlaubt. Als Faustregel gilt, dass Sie immer versuchen sollten, eine der beiden Einheiten abzüglich der Werte (Prozentsatz oder Zahl) zu verwenden. Dies gibt ihm eine gewisse Flexibilität, wenn es um verschiedene Schriften geht, die verwendet werden können. Wie ich bereits erwähnt habe, funktioniert der Standard in den meisten Fällen am besten.