CSS enheder

CSS enheder

CSS har flere forskellige længdeenheder.

Mange CSS egenskaber accepterer "længde"-værdier, såsom width,margin,padding,font-size osv.

Længde er et tal efterfulgt af en længdeenhed, såsom 10px,2em osv.

Eksempel

Brug px (pixels) til at sætte forskellige længdeværdier:

h1 {
  font-size: 60px;
}
p {
  font-size: 25px;
  line-height: 50px;
}

Prøv det selv

Der kan ikke være et mellemrum mellem tal og enhed. Men hvis værdien er 0, kan enheden undlades.

For nogle CSS egenskaber er det tilladt at bruge negative længder.

Der er to typer længdeenheder:Absolutter enhederogRelative enheder.

Absolute længde

Absolute længdeenheder er faste, og længden, der representeres ved enhver absolut længde, vises præcis som denne størrelse.

Det anbefales ikke at bruge absolute længdeenheder på skærmen, da skærmstørrelsen varierer meget. Men hvis det kendte udgivesmedium er kendt, kan de bruges, f.eks. til printlayout (print layout).

Enhed Beskrivelse TIY
cm Centimeter Prøv det
mm Millimeter Prøv det
in Tomme (1tomme = 96px = 2.54 cm) Prøv det
px * Pixel (1px = 1/96 af 1 tomme) Prøv det
pt Point (1pt = 1/72 af 1 tomme) Prøv det
pc Pica (1pc = 12 pt) Prøv det

* Pixel (px) er i forhold til visningsudstyret. For enheder med lav dpi er 1px en enhedspixel (punkt) på skærmen. For printere og højopløselige skærme betyder 1px flere enhedspixels.

Relative længde

Relative længdeenheder definerer længden i forhold til en anden længdeegenskab. Relative længdeenheder skalerer bedre mellem forskellige rendering medier.

Enhed Beskrivelse TIY
em Forhold til elementets skrifttypestørrelse (font-size) (2em betyder 2 gange den aktuelle skrifttypestørrelse) Prøv det
ex Forhold til den aktuelle skrifttype's x-height (sædvanligvis sjældent brugt) Prøv det
ch Forhold til "0" (nul)'s bredde Prøv det
rem Forhold til rodens elementstørrelse (font-size) Prøv det
vw Forhold til visningsporten*'s bredde på 1% Prøv det
vh Forhold til visningsporten*'s højde på 1% Prøv det
vmin Forhold til visningsporten*'s mindre størrelse på 1% Prøv det
vmax Relativt til viewport * større størrelse 1% Prøv det
% Relativt til forældrelementet Prøv det

Tip:Em og rem-enheder kan bruges til at skabe perfekte skalerbare layout!

* Viewport (Viewport) = Størrelsen af browservinduet. Hvis viewporten er 50 cm bred, så 1vw = 0.5 cm.

Browser understøttelse

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter denne længdeenhed.

Længdeenheder
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0