Bij het instellen van de grootte van elk element in CSS hebben we twee keuzes. De eerste zijn absolute eenheden en de andere zijn relatieve eenheden. Absolute eenheden zijn vast en niet relatief ten opzichte van iets anders. Ze zijn in ieder geval altijd identiek. Het gaat om cm, mm, px, enz. Aan de andere kant zijn relatieve eenheden relatief ten opzichte van iets anders. Het kan de grootte van het bovenliggende element zijn, of de grootte van de hoofd-HTML. Relatieve eenheden omvatten em, rem, vw, vh, enz. Dit zijn schaalbare eenheden en helpen bij responsief ontwerp. Velen van ons raken misschien in de war tussen de relatieve eenheden, vooral de in en de rem eenheden. Laten we het verschil tussen die twee opsplitsen. In principe zijn zowel rem als em schaalbare en relatieve grootte-eenheden, maar bij em is de eenheid relatief ten opzichte van de lettergrootte van het bovenliggende element, terwijl de rem-eenheid alleen relatief is ten opzichte van de hoofdlettergrootte van het HTML-document. De r in rem staat voor wortel.

Laten we ze allebei in detail begrijpen.

1. in Verenigd: Met de em-eenheid kunt u de lettergrootte van een element instellen in verhouding tot de lettergrootte van het bovenliggende element. Wanneer de grootte van het bovenliggende element verandert, verandert de grootte van het onderliggende element automatisch.

Opmerking: Wanneer em-eenheden worden gebruikt voor de eigenschap font-size, is de grootte relatief ten opzichte van de font-grootte van het bovenliggende element. Bij gebruik op andere eigenschappen is het relatief ten opzichte van de lettergrootte van dat element zelf. Hier neemt alleen de eerste verklaring de referentie van de ouder over.

• De lettergrootte van het .child-element zal zijn 40px (2*20px).
• De marge van .child zal zijn 60px . Dat is 1,5 keer de lettergrootte van ons element (1,5*40px).

Voorbeeld: Dit voorbeeld toont het gebruik van de em-eenheid in CSS.

HTML