CSS- eenheden
CSS-eenheden
CSS heeft verschillende eenheden voor het uitdrukken van een lengte.
Veel CSS-eigenschappen nemen "lengte" -waarden aan, zoals width, margin, padding,
font-size, etc.
Lengte is een getal gevolgd door een lengte-eenheid, zoals 10px,
2em, etc.
Voorbeeld
Stel verschillende lengtewaarden in met px (pixels):
h1 {
font-size: 60px;
}
p {
font-size: 25px;
line-height: 50px;
}
Let op: Er mag geen spatie verschijnen tussen het nummer en de eenheid. Als de waarde echter is
0, kan de eenheid worden weggelaten.
Voor sommige CSS-eigenschappen zijn negatieve lengtes toegestaan.
Er zijn twee soorten lengte-eenheden: absoluut en relatief .
Absolute lengtes
De absolute lengte-eenheden zijn vast en een lengte die in een van deze wordt uitgedrukt, wordt weergegeven als precies die maat.
Absolute lengte-eenheden worden niet aanbevolen voor gebruik op het scherm, omdat de schermformaten zo variëren. Ze kunnen echter worden gebruikt als het uitvoermedium bekend is, zoals voor de afdruklay-out.
| Unit | Description |
|---|---|
| cm | centimeters |
| mm | millimeters |
| in | inches (1in = 96px = 2.54cm) |
| px * | pixels (1px = 1/96th of 1in) |
| pt | points (1pt = 1/72 of 1in) |
| pc | picas (1pc = 12 pt) |
* Pixels (px) zijn relatief ten opzichte van het weergaveapparaat. Voor apparaten met een lage dpi is 1px één apparaatpixel (punt) van het scherm. Voor printers en schermen met hoge resolutie betekent 1px meerdere apparaatpixels.
Relatieve lengtes
Relatieve lengte-eenheden specificeren een lengte ten opzichte van een andere lengte-eigenschap. Relatieve lengte-eenheden schalen beter tussen verschillende weergavemedia.
| Unit | Description | |
|---|---|---|
| em | Relative to the font-size of the element (2em means 2 times the size of the current font) | |
| ex | Relative to the x-height of the current font (rarely used) | |
| ch | Relative to the width of the "0" (zero) | |
| rem | Relative to font-size of the root element | |
| vw | Relative to 1% of the width of the viewport* | |
| vh | Relative to 1% of the height of the viewport* | |
| vmin | Relative to 1% of viewport's* smaller dimension | |
| vmax | Relative to 1% of viewport's* larger dimension | |
| % | Relative to the parent element |
Tip: De em en rem units zijn praktisch bij het creëren van een perfect schaalbare lay-out!
* Viewport = de grootte van het browservenster. Als het kijkvenster 50 cm breed is, is 1vw = 0,5 cm.
Browserondersteuning
De nummers in de tabel geven de eerste browserversie aan die de lengte-eenheid volledig ondersteunt.
| Length Unit | |||||
|---|---|---|---|---|---|
| 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 |