Over eenheden in CSS
Bij het opmaken van een pagina krijg je altijd te maken met de breedte en de hoogte van elementen. Binnen CSS zijn veel eigenschappen die je opgeeft met een afmeting. Denk daarbij aan width, margin, padding, font-size, border-width, enzovoort.
Voor het opgeven van afmetingen zijn binnen CSS diverse eenheden beschikbaar, zie de onderstaande overzichten. Een afmeting
is altijd een geheel of gebroken getal, gevolgd door een eenheid, zonder spaties er tussen. Bijvoorbeeld: 10px, 1.2em, enzovoort.
Als je een afmeting nul opgeeft (bijv. een padding of border-width) zet je er geen eenheid achter. Het mag wel, maar
de eenheid heeft dan geen betekenis.
Bij sommige CSS-eigenschappen (waaronder top, bottom, left en right) kan een negatief getal worden opgegeven.
De afmetingen kunnen zowel absoluut zijn als relatief.
Absolute afmetingen zijn 'hard'; absolute afmetingen verschijnen exact op het scherm zoals je ze opgeeft, bijvoorbeeld width:100px; height:20px.
Vanwege de verschillende schermafmetingen die er bestaan, zijn absolute afmetingen minder geschikt om op een beeldscherm te
gebruiken. Dat gaat beter met relatieve afmetingen. Voor print lay-outs, zijn absolute afmetingen juist weer heel geschikt.
Relatieve afmetingen zijn altijd ten opzichte van het 'parent'-element. Relatieve afmetingen schalen beter tussen diverse media zoals beeldscherm, projector, printer, enz.
Hieronder een overzicht van alle eenheden binnen CSS.
| Eenheid | Omschrijving | |
| em | Relatief ten opzichte van de font-size van
het 'parent'-element (1.2em betekent: 1,2 maal de grootte van het 'parent'-element). |
|
| ex | Relatief ten opzichte van de x-hoogte van het huidige
font. Dit is de beste eenheid om de lettergrootte perfect in te stellen voor een beeldscherm. Voor andere media is het minder geschikt. Het wordt (daarom?) nauwelijks meer gebruikt. Zie het item Afmetingen van letters en toepassing met CSS voor een beschrijving van 'x-hoogte'. |
|
| ch | Relatief ten opzichte van de breedte van de 0
(nul) van het huidige font. |
|
| rem | Relatief ten opzichte van de breedte van de font-size
van het root-element. Binnen de HTML-DOM is dat <html> of <body>. |
|
| vw | Relatief ten opzichte van de breedte van de viewport. Als de viewport 20cm breed is, is 1vm gelijk aan 2 mm. De viewport is de grootte van het browser-window, een i-frame of een div-tag. |
|
| vh | Relatief ten opzichte van de hoogte van de viewport. De viewport is de grootte van het browser-window, een i-frame of een div-tag. |
|
| vmin | Relatief ten opzichte van de kleinste afmeting van
de viewport. De viewport is de grootte van het browser-window, een i-frame of een div-tag. |
|
| vmax | Relatief ten opzichte van de grootste afmeting van
de viewport. De viewport is de grootte van het browser-window, een i-frame of een div-tag. |
|
| % | Percentage van het 'parent'-element. |
| Eenheid | Omschrijving | |
| cm | Centimeters. De afmeting wordt omgerekend naar de
resolutie van het beeldscherm, printer, enz. |
|
| mm | Millimeters. De afmeting wordt omgerekend naar de
resolutie van het beeldscherm, printer, enz. |
|
| in | Inches. De afmeting wordt omgerekend naar de resolutie
van het beeldscherm, printer, enz. |
|
| px | Pixels. Deze zijn afhankelijk van het apparaat waarmee
de website wordt bekeken. Voor lage-resolutie beeldschermen is 1px gelijk aan één fysiek beeldpunt. Voor printers
en hoge-resolutie beeldschermen is 1px gelijk aan meerdere fysieke beeldpunten. |
|
| pt | Punten. 1pt = 1/72 inch. |
|
| pc | Pica's. 1pc = 12pt = 1/6 inch. |
