CSS enheter

CSS enheter

CSS har flera olika enheter för att representera längd.

Många CSS-attribut accepterar "längd"-värden, såsom width、margin、padding、font-size etc.

Längd är ett tal följt av en längdhet enhet, såsom 10px、2em etc.

Exempel

Använd px (pixel) för att ställa in olika längdvärden:

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

Prova själv

Det får inte finnas blanksteg mellan siffror och enheter. Men om värdet är 0 kan enheten utelämnas.

För vissa CSS-attribut tillåts negativa längder.

Längdenheter har två typer:Absoluta enheterochRelativa enheter.

Absolut längd

Absoluta längdenheter är fasta och längden som representeras av någon absolut längd kommer att visas exakt i denna storlek.

Det rekommenderas inte att använda absoluta längdenheter på skärmen eftersom skärmstorleken varierar mycket. Men om utmatningsmedia är känt, kan de användas, till exempel för utskriftslayout (print layout).

Enhet Beskrivning TIY
cm Centimeter Prova på
mm Millimeter Prova på
in Tum (1in = 96px = 2.54cm) Prova på
px * Pixel (1px = 1/96 av 1in) Prova på
pt Punkt (1pt = 1/72 av 1in) Prova på
pc Pika (1pc = 12 pt) Prova på

* Pixel (px) är relativt till visningsutrustningen. För enheter med låg dpi är 1px en enhetspixel (punkt) på skärmen. För skrivare och högupplösta skärmar representerar 1px flera enhetspixel.

Relativ längd

Relativa längdenheter definierar längden relativt till en annan längd egenskap. Relativa längdenheter skalas bättre mellan olika renderingsmedia.

Enhet Beskrivning TIY
em Relativt till elementets teckenstorlek (font-size) (2em betyder 2 gånger nuvarande teckenstorlek) Prova på
ex Relativt till nuvarande tecknets x-height (sällan används) Prova på
ch Relativt till "0" (noll) bredd Prova på
rem Relativt till rodenhetens teckenstorlek (font-size) Prova på
vw Relativt till visningsfönstret* bredd 1% Prova på
vh Relativt till visningsfönstret* höjd 1% Prova på
vmin Relativt till visningsfönstret* mindre storlek 1% Prova på
vmax Relativt till visningsfönstret* större storlek 1% Prova på
% Relativt till föräldrelementet Prova på

Tips:Em och rem-enheter kan användas för att skapa perfekta skalbara layouter!

* Visningsfönstret (Viewport) = storleken på webbläsarfönstret. Om visningsfönstret är 50 cm bredt, då 1vw = 0.5 cm.

Webbläsarstöd

Tal i tabellen anger den första webbläsarversion som fullständigt stöder denna längdhet.

Längdenheter
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