Zum Inhalt springen

[CSS] Angabe "em"


Ganymed

Empfohlene Beiträge

Hallo zusammen,

ich versuche mich mal wieder an CSS :)

Auf der Selfhtml-Seite stoße ich immer wieder auf die Einheit "em".

Da steht nur was von relativer Größe zuer Schrift etc.

Irgendwie sagt mir das leider rein gar nichts, wie ich das konkret und gezielt anwenden kann. In den Beispiel CSS sind dort Schriften und margins in der Einheit angegeben...

Kann jemand von den Experten mir das mal für dumme erklären?

So ganz versteh ich bei den Beispielen nicht, wie die auf die Werte kommen.

Wäre super! Danke :)

Gruß

Ganymed

Link zu diesem Kommentar
Auf anderen Seiten teilen

Kann jemand von den Experten mir das mal für dumme erklären?

So ganz versteh ich bei den Beispielen nicht, wie die auf die Werte kommen.

Angabe der Schriftgröße, relativ zur Normalgröße.

1em = 100%

Die Normalgröße ist abhängig von der Einstellung im Browser. Also ähnlich wie bei font-size=medium ist medium die Normalgröße und font-size=small eben etwas kleiner und font-size=large etwas größer als die Normalgröße. Früher wurde dazu <font size=+1> verwendet.

eine Punkt(Pixel)genaue Angabe der Größe kannst du damit nicht erreichen. Sollte man ja aber auch nicht, da die Inhalte ja auf verschiedenen Medien ausgegeben werden können.

Wenn der Margin-top eine Wert von 1em hat, ist also praktisch 1 Leerzeile Rand nach oben vorhanden. Diese Leerzeile ist auch immer so groß, wie bei den aktuellen Einstellungen eine Leerzeile eben ist.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Der Name "em" kommt übrigens vom Buchstaben "M". 1em ist die Größe vom Großbuchstaben M der jeweiligen Schriftart.

Mit

body {

font-size: 62.5%;

} 

Wird 1em in den meisten Einstellungen zu 10px. So kann man das als "Anfänger" leichter abschätzen. Aber vorsicht, verlassen kann man sich darauf nicht, da ja gottseidank jeder seinen Browser einstellen kann, wie er mag :)

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...