logo

Forskellen mellem em og rem enheder i CSS

Mens vi indstiller størrelsen på ethvert element i CSS , har vi to valgmuligheder. Den første er absolutte enheder og den anden er relative enheder. Absolutte enheder er faste og ikke i forhold til noget andet. De er altid identiske under alle omstændigheder. De involverer cm, mm, px osv. På den anden side er relative enheder relative til noget andet. Det kan være størrelsen på det overordnede element eller størrelsen på den primære HTML. Relative enheder dækker em, rem, vw, vh osv. Disse er skalerbare enheder og hjælper med responsivt design. Mange af os kan blive forvirrede mellem de relative enheder, især i og rem enheder. Lad os nedbryde forskellen mellem de to. Grundlæggende er at både rem og em er skalerbare og relative størrelsesenheder, men med em er enheden relativ til skriftstørrelsen på dets overordnede element, mens rem-enheden kun er i forhold til rodskriftstørrelsen i HTML-dokumentet. r'et i rem står for root.

Lad os forstå dem begge i detaljer.



1. i United: Em-enheden gør det muligt at indstille skriftstørrelsen på et element i forhold til dets overordnede skriftstørrelse. Når størrelsen på det overordnede element ændres, ændres størrelsen på barnet automatisk.

Bemærk: Når em-enheder bruges på egenskaben font-size, er størrelsen i forhold til den overordnede skriftstørrelse. Når det bruges på andre egenskaber, er det i forhold til skriftstørrelsen på selve elementet. Her er det kun den første erklæring, der tager forælderens reference.

  • Skriftstørrelsen på .child-elementet vil være 40 px (2*20px).
  • Marginen for .child vil være 60 px . Det er 1,5 gange skriftstørrelsen af ​​vores element (1,5*40px).

Eksempel: Dette eksempel viser brugen af ​​em-enheden i CSS.



HTML






> <>html>>> <>head>>> ><>title>>Em vs Remtitle> hoved>