Wie kann ich den Abstand zwischen unterstrichenem Text und der Unterstreichung in CSS vergrößern?

Vergrößern der Unterstreichungslücke mit CSS

Die visuelle Unterscheidung zwischen Text und seiner Unterstreichung ist für die Lesbarkeit von entscheidender Bedeutung. Während CSS die Eigenschaft text-decoration:underline bietet, um dem Text eine Unterstreichung hinzuzufügen, bietet es keine direkte Methode zum Anpassen des Abstands zwischen Text und Zeile.

Alternative Lösung

Erwägen Sie stattdessen die Verwendung der Eigenschaft „border-bottom“ mit dem soliden Stil und einer Breite ungleich Null. Dadurch wird unterhalb des Textes ein Rahmen erstellt, der eine Unterstreichung imitiert. Darüber hinaus vergrößert die Anwendung von padding-bottom den vertikalen Abstand zwischen dem Text und dem Rand, wodurch die Illusion einer größeren Lücke entsteht.

Zum Beispiel erstellt das folgende Codebeispiel einen 1 Pixel großen schwarzen Rand unter dem Text mit einem 3 Pixel großen Abstand darunter:

border-bottom: 1px solid #000;
padding-bottom: 3px;

Farbanpassung

Wenn Sie möchten, dass die Rahmenfarbe zum Text passt Farbe, lassen Sie einfach die Farbdeklaration weg, was zu border-bottom-width: 1px und border-bottom-style: solid führt.

Verarbeitung von mehrzeiligem Text

Für mehrzeiligen Text , wickeln Sie es in ein span-Element ein, das im Hauptelement verschachtelt ist. Anschließend wenden Sie die Eigenschaften „border-bottom“ und „padding“ auf das span-Element an. Diese Technik vergrößert effektiv die Lücke zwischen dem Text und der Unterstreichung für mehrzeilige Szenarien.

Das obige ist der detaillierte Inhalt vonWie kann ich den Abstand zwischen unterstrichenem Text und der Unterstreichung in CSS vergrößern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!