Maison > interface Web > tutoriel CSS > Comment définir la distance entre le soulignement CSS et le texte ?

Comment définir la distance entre le soulignement CSS et le texte ?

不言
Libérer: 2018-10-27 11:46:11
original
10321 Les gens l'ont consulté

Cet article vous présentera comment définir la distance entre le soulignement CSS et le texte. Examinons ensuite le contenu spécifique.

Dans l' article précédent, nous avons présenté la méthode de définition du soulignement CSS, mais le soulignement défini semble trop proche du texte, et parfois il n'a pas l'air bien sur la page Web. alors comment définir la distance entre le soulignement CSS et le texte ? Cet article vous présentera comment définir la distance entre le soulignement CSS et le texte.

Le soulignement du texte défini par l'attribut text-decoration en CSS ne peut pas ajuster la distance entre le texte et le soulignement, donc si nous voulons ajuster la distance entre le soulignement et le texte, nous ne pouvons utiliser que la bordure Attribut -bottom pour définir le texte Souligné, regardons la méthode d'implémentation spécifique.

Les attributs que nous devons utiliser pour définir la distance entre le soulignement CSS et le texte sont padding-bottom et border-bottom

Le code spécifique est le suivant :

<!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>
Copier après la connexion

L'effet est le suivant :

Comment définir la distance entre le soulignement CSS et le texte ?

D'après l'image ci-dessus, vous pouvez facilement voir qu'il y a une certaine distance entre le texte et le souligner.

Cet article se termine ici. Pour plus de contenu, vous pouvez faire attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal