web-dev-qa-db-de.com

Was ist die Höhe in em?

Mir ist immer noch nicht klar, was Größe in em bedeutet?
Ich habe px, pt in CSS gearbeitet.
Was würden 0,8, 1,0 und 1,2 em bedeuten?
Ich habe folgende Höhen in CSS gesehen: height: 0.8em; oder höhe: 1.2em;
Wie wird es berechnet?

18
happyhardik

Die Bedeutung von "em" hat sich im Laufe der Jahre geändert. Nicht alle Schriften enthalten den Buchstaben "M" (z. B. Chinesisch), aber alle Schriften haben eine Höhe. Der Begriff bedeutet daher die Höhe der Schrift und nicht die Breite des Buchstabens "M".

Schauen wir uns ein einfaches Beispiel an, in dem wir mit der em-Einheit die Schriftgrößen einstellen:

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

Bei der Angabe von Schriftgrößen bezieht sich die Einheit Auf die Schriftgröße des übergeordneten Elements . Im vorherigen Beispiel Ist die Schriftgröße des h1 Elements doppelt so groß wie die Schriftgröße Des body Elements. Um herauszufinden, wie Die Schriftgröße des h1-Elements Sein wird, müssen wir die Schriftgröße von body kennen. Da dies nicht in Des Stylesheets angegeben ist, muss der Browser Von einem anderen Ort aus suchen. Ein guter Ort Zum Suchen befindet sich in den Benutzereinstellungen. Wenn der Benutzer die normale Schriftgröße Auf 10 Punkte festlegt, beträgt die Größe des h1 Elements 20 Punkte. Dadurch werden Dokumentüberschriften relativ Zum umgebenden Text hervorgehoben. Deshalb: Verwenden Sie immer ems, um die Schriftgröße einzustellen!

Mehr Info

27
simplyharsh

1emist gleich zur aktuellen Schriftgröße .

2em bedeutet die doppelte Größe der aktuellen Schrift.

Wenn beispielsweise ein Element mit einer Schrift von 12 pt angezeigt wird, ist '2em' 24 pt. Das 'em' ist eine sehr nützliche Einheit in CSS, da es sich automatisch an die vom Leser verwendete Schriftart anpassen kann

Hier ist ein Link zu anderen CSS-Units: 

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

17
Haim Evgi

1em entspricht der aktuellen Schriftgröße. 2em bedeutet die doppelte Größe der aktuellen Schrift. Wenn beispielsweise ein Element mit einer Schrift von 12 pt angezeigt wird, ist '2em' 24 pt. Das 'em' ist eine sehr nützliche Einheit in CSS, da es sich automatisch an die vom Leser verwendete Schriftart anpassen kann.

mehr hier

3
Sotiris

Ein em ist die Breite des Buchstaben "m" (in Ihrer aktuellen Schriftart und -größe).

2
Paul Schreiber

Paul hat recht, aber sein "M" ist nicht "m". Dies ist jedoch eine esoterische Definition, die vom Satz/Drucken abgeleitet wird und in diesem Fall nicht viel nützt. In Bezug auf das, was für Sie nützlich sein wird, ist es ein Prozentsatz der Schriftgröße.

2
prodigitalson

Em ist die Größe eines Charakters. Dies hängt von der Schriftgröße ab. Wenn die Schriftgröße 24 ist, entspricht 2Em dem Platz, den zwei Zeichen der Schriftgröße 24 aufnehmen müssen.

Wie aus Wiki zitiert.

Ein em ist eine Maßeinheit im Feld Der Typografie. Diese Einheit definiert Den Anteil der Buchstabenbreite und Höhe in Bezug auf die Punktgröße Der aktuellen Schriftart.

FYI: En ist die Hälfte von Em. 0,5 em

2
Rakesh Juyal

Ein em bedeutet "kurzlebige Einheit" und ist relativ zur aktuellen Schriftgröße des übergeordneten Elements. Beispielsweise ist der Text in einer Überschrift <h1> standardmäßig 2em. Dies ist darauf zurückzuführen, dass ein <h1> seine Textgröße von seinem übergeordneten Element, dem <body> des Dokuments, erbt. Wenn ich meine <body>-Schriftgröße auf 16px (Schriftgröße: 16px;) Mein <h1>, der 2em ist, erbt eine Größe von 32px, da 2em doppelt so groß ist wie 1em. In diesem Fall ist 1em = 16px, also 2em = 2x16px = 32px. Nun, wenn Sie ein HTML-Dokument mit folgendem erstellen

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

Dann definieren Sie folgende CSS-Regel.

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

Öffnen Sie die Seite in einem Webbrowser (Chrome) und öffnen Sie die Browser-Entwicklungstools (ctrl+shift+I). Die Standardschriftgröße für einen <h1> ist 2em. Auf der Registerkarte "Stile" wird auch angezeigt, dass es sich um "Vom Körper geerbt" handelt. Wenn Sie sich noch in den Entwicklungstools für dieses Szenario befinden, können Sie im Diagramm des Boxmodells sehen, dass der Rand von <h1> 21.440px oben ist untere Ränder. Wenn Sie in den CSS-Standardwerten für <h1> nachsehen, sehen Sie die margin-block-start: 0.67em; und margin-block-end: 0.67em;. Vergessen Sie nicht, dass die Größe relativ zur Schriftgröße des übergeordneten Elements ist. 0,67em ist relativ zur <h1>-Schriftgröße und nicht die Schriftgröße der <body>, die Sie überprüfen können dies mit ein paar Berechnungen, 0,67em x 32px = 21,440px, und dies ist die Größe des Randes des <h1> im Box Model-Diagramm. Für weitere Informationen versuchen Sie http://www.123webconnect.com/convert-px-em.php

0
Dwayne