CSS Eenheid

CSS Eenheid

CSS heeft verschillende manieren om lengtes te representeren.

Veel CSS-eigenschappen accepteren "lengte"-waarden, zoals width,margin,padding,font-size enz.

Lengte is een getal gevolgd door een lengte-eenheid, zoals 10px,2em enz.

Voorbeeld

Gebruik px (pixels) om verschillende lengtewaarden in te stellen:

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

Probeer het zelf uit

Er mogen geen spaties tussen het getal en de eenheid zijn. Maar als de waarde 0 is, kan de eenheid worden weggelaten.

Voor sommige CSS-eigenschappen is het mogelijk om negatieve lengtes te gebruiken.

Er zijn twee types lengte-eenheden:Absolute eenheidenRelative eenheid.

Absolute lengte

Absolute lengte-eenheden zijn vast en de lengte die door een absolute lengte wordt aangegeven, wordt exact van die maat weergegeven.

Het wordt niet aanbevolen om absolute lengte-eenheden op het scherm te gebruiken, omdat de schermgrootte erg variabel is. Maar als het outputmedium bekend is, kunnen ze gebruikt worden, bijvoorbeeld voor printlayout (print layout).

Eenheid Beschrijving TIY
cm Centimeter Probeer het uit
mm Millimeter Probeer het uit
in Inch (1in = 96px = 2.54cm) Probeer het uit
px * Pixel (1px = 1/96th of 1in) Probeer het uit
pt Point (1pt = 1/72 van 1in) Probeer het uit
pc Pica (1pc = 12 pt) Probeer het uit

* Pixel (px) is ten opzichte van het kijkapparaat. Voor apparaten met een lage dpi is 1px een apparaatpixel (punt) op het scherm. Voor printers en hoge resolutieschermen betekent 1px meerdere apparaatpixels.

Relative lengte

De relative lengte-eenheid definieert de lengte ten opzichte van een andere lengte-eigenschap. Relative lengte-eenheden renderen beter tussen verschillende renderingsmedia.

Eenheid Beschrijving TIY
em Ten opzichte van de lettergrootte van het * element (font-size) (2em betekent het dubbele van de huidige lettergrootte) Probeer het uit
ex Ten opzichte van de x-height van de huidige lettergrootte (zeer zelden gebruikt) Probeer het uit
ch De breedte ten opzichte van "0" (nul) Probeer het uit
rem De grootte van de lettergrootte van het * root-element (font-size) Probeer het uit
vw 1% van de breedte van het * viewport Probeer het uit
vh 1% van de hoogte van het * viewport Probeer het uit
vmin 1% ten opzichte van de * smaller afmeting van het viewport Probeer het uit
vmax Relatief ten opzichte van de grotere afmetingen van het viewport * 1% Probeer het uit
% Relatief ten opzichte van de ouderweergave Probeer het uit

Tip:Em en rem-eenheden kunnen worden gebruikt om perfecte schaalbare lay-outs te maken!

* Viewport (Viewport) = de grootte van het browservenster. Als het viewport 50 centimeter breed is, dan is 1vw = 0.5 centimeter.

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze lengte-eenheid volledig ondersteunt.

Lengte-eenheden
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