Quel est le contexte d’em?

Dans cet exemple:

Le CSS

h1 { font-size: 2em; } .smaller { font-size: 0.5em; } 

Le HTML

 

Hi, I am a toad

Le mot “crapaud” sera-t-il 0,5 fois 16px (taille de police standard du navigateur) ou sera-t-il 0,5 fois 2em (taille de police du h1)?

Il est égal à la valeur calculée de la propriété ‘font-size’ de l’élément sur lequel il est utilisé. L’inheritance s’exécute dans l’arborescence du document.

Pour répondre à votre question, ce serait 0,5 fois le 2em, qui serait à son tour 2 fois quelle que soit la taille de police calculée du parent de h1. ouf .

Il est également important de noter que si vous utilisez em sur d’autres propriétés CSS, par exemple width ou height , le résultat sera calculé à partir de la font-size de font-size calculée de l’élément auquel vous appliquez la width ou la height , etc.

L’article suivant décrit l’utilisation et le contexte de l’unité em plutôt bien à mon avis, ainsi que d’autres ressources et ressources de lecture … Les unités rem peuvent également vous intéresser.

  1. http://www.impressivewebs.com/understanding-em-units-css/
  2. http://snook.ca/archives/html_and_css/font-size-with-rem
  3. http://caniuse.com/rem

Vous pouvez également consulter ce violon pour voir comment il se comporte un peu mieux:

http://jsfiddle.net/HpJjt/3/

L’ unité em indique la taille de la police de l’élément, sauf lorsqu’elle est utilisée dans la valeur de la propriété font-size , où elle indique la taille de la police de l’élément parent. En ce sens, dans le cas présenté, le contexte est l’élément parent.

Dans le cas présenté, la taille de la police du mot «crapaud» est donc égale à la taille de la police du parent du h1 . Aucune valeur spécifique ne peut en être déduite à partir des données fournies.

Lorsque la taille de la police est calculée, la taille de la police du parent de h1 a été calculée lorsque cette construction sera traitée; appelons ça s . D’abord, la taille de police de h1 est calculée en multipliant s (la taille de la police du parent) par 2. Ensuite, la taille de la police de l’élément span est calculée en multipliant la taille de la police par 0,5. Théoriquement, les erreurs d’arrondi peuvent entraîner une déviation minimale dans ces processus, mais on peut supposer que la multiplication par 2 et 0,5 est exacte dans les ordinateurs.

Ce serait 0,5 fois le 2em de l’élément h1 en contexte.

Pour le forcer à être relatif au 16px, vous devrez d’abord définir le parent de h1 sur la taille de police 16px.

.wrapper {font-size: 16px;} h1 {font-size: 2em; } .maller {font-size: 0.5em; }

 

Hi, I am a toad

SO dans ce cas,

  • le wrapper a une taille de police de 16px
  • h1 a une taille de police de 2em de 16px
  • span.smaller a une taille de police de 1em (de .wrapper hérité de h1 (.5em de 2em)) de 16px

Notez que em est une mesure relative du contexte qui repose nominalement sur la hauteur des caractères M dans la police actuelle. H1 a une taille de 32px et span.smaller a une taille de 16px.

Cela dépend de la taille en pixels de l’élément parent. Si la taille de pixel de votre élément parent est 16px

.5em sera égal à la moitié de votre pixel de base, il sera donc 8px et 2em pour h1 sera égal à 32px .

Tout dépend de la configuration de la taille en pixels de l’élément parent dans votre CSS.

http://pxtoem.com/