Lorsque vous traitez des éléments en ligne à l'intérieur d'éléments de bloc, vous n'avez pas beaucoup d'options pour modifier la taille de leur boîte englobante. min-height ne fonctionne pas sur les éléments en ligne, et line-height n'aura aucun effet.
La définition d'un padding approprié peut être une option raisonnable, mais vous rencontrerez probablement des problèmes avec l'arrière-plan de l'élément qui chevauche d'autres éléments dans le bloc conteneur.
Comme une démonstration rapide, essayez ceci:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
span {
background: #0F0;
padding: 0.5em 0;
}
</style>
</head>
<body>
<p>This is some demo text. Look at how <span>texty</span> it is.</p>
</body>
</html>
Vous verrez que l'arrière-plan de l'étendue verticale texty se développe, mais il va se chevauchent texte précédent et suivant les lignes. Vous pouvez définir la propriété display de l'élément sur inline-block dans les navigateurs modernes pour éviter ce problème, mais vous aurez alors un interlignage incohérent, ce qui serait certainement gênant si vous vous trouvez dans un bloc de texte.
Je pense que votre meilleure option, que cela vous plaise ou non, est simplement de vous assurer que l'image que vous souhaitez appliquer à vos liens correspond au texte que vous allez afficher.
merci beaucoup pour cette {: – saji