Problème de taille de police entre les éléments CSS parent et enfant

Question

.logo{
width: 25%;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border: 2px solid gold;
}

.logo h1{
margin-left: 1vw;
/*font-size: 1.3rem;*/
border: 2px solid red;
}

<section id="l" class="logo">
            <i class="fa-solid fa-dragon"></i>
            <h1>Blog</h1>
</section>

Lorsque je modifie la taille de la police dans le sélecteur .logo, je peux voir que mon élément h1 s'agrandit. Cependant, quand je fais la même chose mais maintenant dans le sélecteur .logo h1, les tailles sont différentes. Notez que j'utilise la même taille de police dans les deux cas. Je ne sais pas ce qui s'est passé.

Answer 1

1 rem est égal à la taille de la police de l'élément racine. Par exemple, si la taille de police de l'élément racine est définie sur 16 px, alors 1rem est égal à 16 px.

L'utilisation d'unités rem facilite la création de conceptions réactives car elle vous permet de définir la taille par rapport à l'élément racine au lieu d'utiliser des valeurs de pixels absolues. Cela signifie que si un utilisateur modifie la taille de police par défaut dans les paramètres de son navigateur, votre site Web aura toujours l'air proportionnellement correct.

Answer 2

Vous pouvez utiliser l'inspecteur des outils de développement de votre navigateur pour voir exactement qui/où la taille de la police est définie.

Si la taille de police dans le parent est définie sur 1,3rem, la taille em est définie.

Son enfant (h1) ne définit pas explicitement la taille de police que vous définissez, il prend donc la taille de police définie par le navigateur. Dans cet exemple, j'ai défini la taille de police de h1 sur 1,5em.

Donc, la taille de police en h1 devient 1,5 * 1,3rem

Dans le second cas, vous le remplacez en définissant spécifiquement la taille de police par défaut de h1 à 1,3rem (moins de 1,5 * 1,3rem).