Comment remplacer la hauteur de ligne de l'élément parent

Question

J'ai un problème avec la modification de la hauteur de ligne d'un élément enfant. Mon objectif est simplement de réinitialiser la hauteur de ligne à la valeur normale au lieu d'utiliser la valeur plus élevée de son parent.

a{ line-height:100px; } 
a small{ line-height:10px; //or normal } 

Je veux la hauteur de ligne de small à la normale, mais il ne fonctionne pas.

Des idées?

Small Demo

Answer 1

Utilisation:

small { 
    display: inline-block; 
    line-height: 1; /*or whatever you like.*/ 
} 

Vous devez inline-block, comme <small> est en ligne par défaut, et ainsi hérite de la hauteur de la ligne de son parent.

Answer 2

Voici le violon mis à jour https://jsfiddle.net/pae871az/2/ je viens d'ajouter display:inline-block

.first small{ 
    line-height:normal; 
    display: inline-block; 
}