Que signifie la balise em en CSS ?

EM en CSS représente une unité de longueur relative à la taille de police actuelle, notée « em » (par exemple, font-size : 1.2em ;). Il diffère de PX (Pixels) et REM (Root EM) en ce qu'il est relatif, par rapport à la taille de police actuelle, alors que PX est absolu, représentant les pixels de l'écran, et REM est relatif à la taille de police de l'élément racine du document. EM est utilisé pour ajuster la taille et l'espacement du texte afin de redimensionner le texte en fonction des préférences de l'utilisateur, de créer des conceptions réactives et de définir l'espace entre les éléments.

La signification de la balise EM en CSS

EM est une unité en CSS qui représente une longueur relative à la taille de police actuelle.

Comment utiliser EM

La valeur EM est suivie d'une lettre "m", par exemple :

<code>font-size: 1.2em;</code>

Cela définit la taille de police du texte à 1,2 fois la taille de police actuelle.

La différence entre EM et PX et REM

• PX (pixel) est une unité absolue qui représente les pixels physiques sur l'écran.
• EM est une unité relative, par rapport à la taille de police actuelle.
• REM (root EM) est également une unité relative, mais elle est relative à la taille de la police de l'élément racine du document.

Quand utiliser EM

EM convient pour redimensionner et espacer le texte sans changer ses proportions. Il est particulièrement utile pour :

• Redimensionner le texte en fonction des préférences de l'utilisateur
• Créer des designs réactifs qui s'adaptent automatiquement à différentes tailles d'écran
• Définir l'espace entre les éléments

Exemple

<code>body {
  font-size: 16px;
}

h1 {
  font-size: 2em;  /* 相对于正文文本的 2 倍 */
}

p {
  margin-bottom: 1em;  /* 相对于正文文本的 1 倍 */
}</code>

Le code ci-dessus :

• Définir la taille de la police du corps du texte sur 16px
• Définissez la taille de la police de la balise h1 sur 2 fois le corps du texte
• Définissez la marge sous la balise p sur 1 fois le corps du texte

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!