logo

Skillnaden mellan em och rem enheter i CSS

När vi ställer in storleken på ett element i CSS , har vi två val. Den första är absoluta enheter och den andra är relativa enheter. Absoluta enheter är fasta och inte relativa till något annat. De är alltid identiska i alla fall. De involverar cm, mm, px etc. Å andra sidan är relativa enheter relativa till något annat. Det kan vara storleken på det överordnade elementet eller storleken på huvud-HTML. Relativa enheter täcker em, rem, vw, vh, etc. Dessa är skalbara enheter och hjälper till med responsiv design. Många av oss kan bli förvirrade mellan de relativa enheterna, särskilt i och den rem enheter. Låt oss bryta ner skillnaden mellan dessa två. I grund och botten är att både rem och em är skalbara och relativa storleksenheter, men med em är enheten relativ till teckensnittsstorleken för sitt överordnade element, medan rem-enheten endast är relativt till HTML-dokumentets rotteckensnittsstorlek. Det kvarvarande r står för rot.

Låt oss förstå dem båda i detalj.



1. i United: Med em-enheten kan du ställa in teckenstorleken för ett element i förhållande till teckenstorleken för dess överordnade. När storleken på det överordnade elementet ändras ändras storleken på det underordnade automatiskt.

Obs! När em-enheter används på font-size-egenskapen är storleken relativ till den överordnade font-size. När det används på andra egenskaper, är det relativt till teckenstorleken på själva elementet. Här tar endast den första deklarationen referensen från föräldern.

  • Teckenstorleken för .child-elementet kommer att vara 40px (2*20px).
  • Marginalen för .child kommer att vara 60px . Det är 1,5 gånger teckensnittsstorleken på vårt element (1,5*40px).

Exempel: Det här exemplet visar användningen av em - enheten i CSS .



HTML


slumpmässig värdegenerator i java





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