Article CSS - méthode de calcul de la hauteur de ligne (éléments parents et enfants)

Voici quelques situations qui, selon moi personnellement, sont sujettes à l'ambiguïté. La
structure HTML est la suivante :

<p>
     </p><p>
        测试行高
    </p>

L'élément parent est un nombre et l'élément enfant n'est pas défini

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

L'élément parent est
L'élément enfant est
Indique que l'élément enfant hérite de la valeur numérique du paramètre d'affichage de l'élément parent, qui est liée à la taille de police de l'élément parent

Pourcentage de l'élément parent , l'élément enfant n'est pas défini

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

élément parent Le parent est
L'élément enfant est
, indiquant que l'élément enfant hérite de la hauteur de ligne du parent élément calculé en fonction du pourcentage, et n'a rien à voir avec la taille de police de l'élément parent lui-même

associé

Pour les cas 1 et 2, ajoutez line-height: inherit à l'élément enfant enfant , et dériver les cas 3 et 4, avec les mêmes performances

Voici juste quelques individus répertoriés ici Situations qui sont facilement floues. La
structure HTML est la suivante :

<p>
     </p><p>
        测试行高
    </p>

L'élément parent est un nombre et l'élément enfant n'est pas défini

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

L'élément parent est
L'élément enfant est
Indique que l'élément enfant hérite de la valeur numérique du paramètre d'affichage de l'élément parent, qui est liée à la taille de police de l'élément parent

Pourcentage de l'élément parent , l'élément enfant n'est pas défini

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

élément parent Le parent est
L'élément enfant est
, indiquant que l'élément enfant hérite de la hauteur de ligne du parent élément calculé en fonction du pourcentage et n'a rien à voir avec la taille de police de l'élément parent lui-même

Plus d'articles sur la méthode de calcul de la hauteur de la ligne d'article CSS (éléments parent-enfant), veuillez prêter attention au Site Web chinois PHP !