web-dev-qa-db-fra.com

Quelle est la hauteur dans em?

Je ne comprends toujours pas ce que signifie taille en em?
J'ai travaillé px, pt en CSS.
Que signifieraient 0,8, 1,0 et 1,2 em?
J'ai vu des tailles en CSS comme: height: 0.8em; ou hauteur: 1.2em;
Comment est-il calculé?

csssizeheight
18
happyhardik

La signification de "em" a changé au fil des ans. Toutes les polices ne contiennent pas la lettre "M" (par exemple, le chinois), mais toutes les polices ont une hauteur. Le terme est donc venu à signifier la hauteur de la police - pas la largeur de la lettre "M."

Regardons un exemple simple dans lequel nous utilisons l'unité em pour définir la taille des polices:

<html>
  <style>
    h1 { font-size: 2em }
  </style>
  <body>
    <h1>Movies</h1>
  </body>
</html>

Lorsqu'elle est utilisée pour spécifier les tailles de police, l'unité Em fait référence à la taille de police de l'élément parent . Ainsi, dans l'exemple précédent , La taille de la police de l'élément h1 Est définie pour être le double de la taille de la police De l'élément body. Pour trouver quelle Taille de la police de l'élément h1 sera , Nous devons connaître la taille de la police de body. Comme cela n'est pas spécifié dans la feuille de style , Le navigateur doit le trouver ailleurs. Un bon endroit où regarder Est dans les préférences de l'utilisateur. Ainsi, si l’utilisateur définit la taille de police normale Sur 10 points, la taille de l’élément h1 Est de 20 points. Cela fait ressortir Les titres du document par rapport au Texte qui l’entoure. Par conséquent: Utilisez toujours ems pour définir la taille des polices!

Plus d'informations

27
simplyharsh

1emest égal à la taille de la police actuelle .

2em signifie 2 fois la taille de la police actuelle.

Par exemple, si un élément est affiché avec une police de caractère de 12 points, alors «2em» est de 24 points. Le 'em' est une unité très utile en CSS, car il peut s’adapter automatiquement à la police utilisée par le lecteur.

Voici un lien vers d'autres unités CSS: 

http://www.w3schools.com/cssref/css_units.asp

17
Haim Evgi

1em est égal à la taille de la police actuelle. 2em signifie 2 fois la taille de la police actuelle. Par exemple, si un élément est affiché avec une police de caractère de 12 points, alors «2em» est de 24 points. Le 'em' est une unité très utile en CSS, car il peut s’adapter automatiquement à la police utilisée par le lecteur.

plus ici

3
Sotiris

Un em est la largeur de la lettre "m" (dans votre police et votre taille actuelles).

2
Paul Schreiber

Paul a raison, mais son "M" n'est pas "m". Cependant, il s’agit d’une définition ésotérique dérivée de la composition/impression et qui n’est pas très utile dans ce cas. En termes de ce qui va vous être utile, c'est un pourcentage de la taille de la police.

2
prodigitalson

Em est la taille d'un personnage. Cela varie en fonction de la taille de la police. Si la taille de la police est 24, alors 2Em seront égaux à l'espace requis pour contenir deux caractères de la taille 24.

Comme cité de wiki.

Un em est une unité de mesure dans le champ De la typographie. Cette unité définit La proportion de la largeur de lettre et de Par rapport à la taille en points De la police actuelle.

FYI: En est la moitié de Em. 0.5Em

2
Rakesh Juyal

Un em signifie "unité éphémère", il est relatif à la taille de police actuelle de son élément parent. Par exemple, le texte dans l'en-tête <h1> est 2em par défaut. Cela vient du fait qu'un <h1> hérite de la taille du texte de son élément parent, le <body> du document. Si je règle ma taille de police <body> à 16px (taille de police: 16px;). Mon <h1> étant 2em hériterait d'une taille de 32px, car 2em est deux fois plus grand que 1em. Dans ce cas, 1em = 16px donc 2em = 2x16px = 32px. Maintenant, si vous créez un document HTML avec les éléments suivants

<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>

Ensuite, vous définissez la règle CSS suivante.

body {font: normal 16px Arial, Helvetica, sans-serif;}

Ouvrez la page dans un navigateur Web (Chrome) et ouvrez les outils de développement des navigateurs (ctrl+shift+I). La taille de police par défaut d'un <h1> est 2em. Vous verrez également sur l'onglet styles qu'il est "hérité du corps". Dans les outils de développement de ce scénario, vous pouvez voir sur le diagramme Box Model que la marge <h1> est de 21,440 pixels en haut et marges inférieures. Si vous regardez dans les valeurs CSS par défaut pour <h1>, vous pouvez voir le margin-block-start: 0.67em; et le margin-block-end: 0.67em; Rappelez-vous que la taille est relative à la taille de la police de l'élément parent. 0.67em est donc relatif à la taille de la police <h1> et non à la taille de la police <body>. ceci avec un peu de math, 0.67em x 32px = 21.440px et ceci est la taille de la marge du <h1> dans le diagramme du modèle de boîte. Pour plus d'informations, essayez http://www.123webconnect.com/convert-px-em.php

0
Dwayne