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

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

不言
不言original
2018-10-27 11:46:1110268parcourir

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>

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!

Déclaration:
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