Problème de hauteur de ligne et d'alignement

Question

J'ai un élément et il est possible qu'il soit plus long qu'une ligne. Je dois donc définir une hauteur de ligne supérieure à 1, sinon le résultat est nul. Mais si je le fais, les lignes sont plus hautes que le texte et le texte est centré. Donc, cela ne correspond pas au sommet. Comment puis-je changer la position du texte en haut de la ligne, ou existe-t-il un autre moyen d'obtenir un espace entre deux lignes?

Answer 1

La hauteur de ligne par définition centre la taille de la police dans la hauteur de ligne donnée. Si vous avez une police 12px et une hauteur de ligne de 16px, le texte sera centré à l'intérieur de 16px, laissant 2px à la fois en haut et en bas.

Une solution pour pousser ce texte vers le haut tout en maintenant la hauteur de ligne est d'ajouter une marge négative à l'élément et de le pousser négativement:

float: left;
margin-top: -2px;

Answer 2

Essayez ceci:

<style type="text/css">
.spacer
{
 line-height:1px;
}

.spacer:after
{
 content:".";
 visibility:invisible;
 line-height:1px;
}
</style>

Vous pouvez augmenter la hauteur de ligne dans le code CSS ci-dessus et l'utiliser comme ceci:

your line one
<p class="spacer"></p>
your line two