CSS-enheter

CSS-enheter

CSS has several different units to represent length.

Many CSS properties accept "length" values such as width,margin,padding,font-size etc.

Length is a number followed by a length unit, such as 10px,2em etc.

Example

Set different length values using px (pixels):

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

Try it yourself

There should be no spaces between numbers and units. However, if the value is 0, the unit can be omitted.

For some CSS properties, negative lengths are allowed.

There are two types of length units:Absolute unitandRelative unit.

Absolute length

Absolute length units are fixed, and the length represented by any absolute length will be displayed exactly this size.

It is not recommended to use absolute length units on the screen because screen sizes vary greatly. However, if the output medium is known, they can be used, such as for print layout (print layout).

Unit Description TIY
cm Centimeter Prova
mm Millimeter Prova
in Inch (1in = 96px = 2.54cm) Prova
px * Pixel (1px = 1/96th of 1in) Prova
pt Point (1pt = 1/72 of 1in) Prova
pc Pica (1pc = 12 pt) Prova

* Pixels (px) are relative to the viewing device. For low dpi devices, 1px is a device pixel (dot) on the screen. For printers and high-resolution screens, 1px represents multiple device pixels.

Relative length

Relative length units specify the length relative to another length property. Relative length units scale better between different rendering media.

Unit Description TIY
em Relative to the font size of the element (font-size) (2em means twice the current font size) Prova
ex Relative to the x-height of the current font (rarely used) Prova
ch Relative to the width of "0" (rarely used) Prova
rem Relative to the font size of the root element (font-size) Prova
vw Relative to the viewport* width 1% Prova
vh Relative to the viewport* height 1% Prova
vmin Relative to the viewport* smaller size 1% Prova
vmax Relativt till viewport*större storlekens 1% Prova
% Relativt till föräldrelementet Prova

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

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

Webbläsarsupport

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

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