Heim > Artikel > Web-Frontend > Wie stelle ich den Abstand zwischen CSS-Unterstreichung und Text ein?
Wie stelle ich den Abstand zwischen CSS-Unterstreichung und Text ein?
- 不言Original
- 2018-10-27 11:46:1110272Durchsuche
In diesem Artikel erfahren Sie, wie Sie den Abstand zwischen CSS-Unterstreichung und Text festlegen. Schauen wir uns als Nächstes den spezifischen Inhalt an.
Im vorherigen Artikel haben wir die Einstellungsmethode von CSS-Unterstreichungen vorgestellt, aber die festgelegte Unterstreichung fühlt sich zu nah am Text an und manchmal sieht sie auf der Webseite nicht richtig aus. Wie stellt man also den Abstand zwischen der CSS-Unterstreichung und dem Text ein? In diesem Artikel erfahren Sie, wie Sie den Abstand zwischen CSS-Unterstreichung und Text festlegen.
Die durch das Textdecoration-Attribut in CSS festgelegte Textunterstreichung kann den Abstand zwischen dem Text und der Unterstreichung nicht anpassen. Wenn wir also den Abstand zwischen der Unterstreichung und dem Text anpassen möchten, können wir nur den Rand verwenden -bottom-Attribut zum Festlegen des Textes Unterstreichen, schauen wir uns die spezifische Implementierungsmethode an.
Die Attribute, die wir verwenden müssen, um den Abstand zwischen der CSS-Unterstreichung und dem Text festzulegen, sind padding-bottom und border-bottom
Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
span{
border-bottom: 2px solid pink;
padding-bottom: 10px;
}
</style>
</head>
<body>
<span>
php中文网下划线距离</span>
</body>
</html> Der Effekt ist wie folgt:
Auf dem Bild oben können Sie leicht erkennen, dass zwischen dem Text und der Unterstreichung ein gewisser Abstand besteht.
Dieser Artikel endet hier. Weitere Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonWie stelle ich den Abstand zwischen CSS-Unterstreichung und Text ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!