Witruimte boven en onder een tekstblok en de hoogte (corps) van een tekst wordt meestal aangegeven in pixels of em.
Het gebruik van pixels is meer ingeburgerd, maar is ook ‘ouderwets’. Veel webbouwers / ontwerpers maken nu gebruik van em waarden. Hier geven een uit uitleg over de verschillen tussen px en em.
Het gebruik van pixels is meer ingeburgerd, maar is ook ‘ouderwets’. Veel webbouwers / ontwerpers maken nu gebruik van em waarden. Hier geven een uit uitleg over de verschillen tussen px en em.
Uitleg em versus px (pixels)
Pixels zijn absoluut
Px, of pixels, betreft een absolute waarde. Absoluut wil zeggen dat 10 pixels op een scherm altijd 10 pixels zijn. Dit heeft als voordeel dat het altijd hetzelfde is (afhankelijk van de resolutie van je scherm). Dat is echter ook het grote nadeel; een witruimte van 20 pixels op een groot scherm is mooi, maar op het scherm van een smartphone of kleine tablet is een witruimte van 20 pixels gigantisch.
Em is relatief
Tegenwoordig wordt em vaker als waarde toegepast. Em is een relatieve waarde ten opzichte van de hoogte van het ‘ouder’ blok. Dus em geeft een hoeveelheid witruimte, in relatie tot het element waartoe het behoort.
Voorbeeld
Je stelt een witruimte in onder een kop van 0,4em. Dan is de witruimte 40% van de hoogte van de kop. Als de kop 24 pixels hoog is, geeft een witruimte van 0,4em een ruimte van 9,6 pixels. Een webbouwer stelt een kop meestal zodanig in, dat de hoogte van de kop voor mobiele weergave wat kleiner is, bijvoorbeeld 18 pixels. De witruimte wordt dan automatisch ook kleiner; namelijk 7,2 pixels.
Deze CSS-code regelt de ruimte boven en onder alle H1, H2, H3, H4, H5 en H6 koppen. Let op: het eerste getal is de ruimte boven de kop, het laatste getal is de ruimte onder de kop. De marge in dit codevoorbeeld wordt uitgedrukt in
em . Je kunt dit wijzigen naar px, zoals bijvoorbeeld 15px. Let op dat decimalen hier worden gemarkeerd met een . (punt) en niet met een komma.
em . Je kunt dit wijzigen naar px, zoals bijvoorbeeld 15px. Let op dat decimalen hier worden gemarkeerd met een . (punt) en niet met een komma.
Witruimte is heel belangrijk
Hieronder zie je een afbeelding met een kop (vetgedrukt) met daaronder witruimte. Daaronder zie je een kleinere kop met een kleinere witruimte.
Witruimte valt onder ‘typografie’. Zie deze link voor meer uitleg
