Beim Festlegen der Größe eines beliebigen Elements in CSS haben wir zwei Möglichkeiten. Bei der ersten handelt es sich um absolute Einheiten und bei der anderen um relative Einheiten. Absolute Einheiten sind fest und nicht relativ zu irgendetwas anderem. Sie sind auf jeden Fall immer identisch. Dabei handelt es sich um cm, mm, px usw. Relative Einheiten hingegen beziehen sich auf etwas anderes. Es kann sich um die Größe des übergeordneten Elements oder um die Größe des Haupt-HTML handeln. Relative Einheiten umfassen em, rem, vw, vh usw. Dies sind skalierbare Einheiten und helfen beim responsiven Design. Viele von uns könnten zwischen den relativen Einheiten verwechselt werden, insbesondere der In und das rem Einheiten. Lassen Sie uns den Unterschied zwischen diesen beiden aufschlüsseln. Grundsätzlich sind sowohl rem als auch em skalierbare und relative Größeneinheiten, aber bei em ist die Einheit relativ zur Schriftgröße des übergeordneten Elements, während die rem-Einheit nur relativ zur Stammschriftgröße des HTML-Dokuments ist. Das r in rem steht für root.

Lassen Sie uns beide im Detail verstehen.

1. in United: Mit der em-Einheit können Sie die Schriftgröße eines Elements relativ zur Schriftgröße seines übergeordneten Elements festlegen. Wenn sich die Größe des übergeordneten Elements ändert, ändert sich automatisch auch die Größe des untergeordneten Elements.

Hinweis: Wenn em-Einheiten für die Eigenschaft „font-size“ verwendet werden, ist die Größe relativ zur Schriftgröße des übergeordneten Elements. Wenn es für andere Eigenschaften verwendet wird, ist es relativ zur Schriftgröße dieses Elements selbst. Hier übernimmt nur die erste Deklaration die Referenz des übergeordneten Elements.

• Die Schriftgröße des .child-Elements beträgt 40px (2*20px).
• Der Rand von .child wird sein 60px . Das ist das 1,5-fache der Schriftgröße unseres Elements (1,5*40 Pixel).

Beispiel: Dieses Beispiel zeigt die Verwendung der em-Einheit in CSS.

HTML