Skip links en inhoudsopgave

Verticaal op gelijke afstand zetten van tekst (waaronder centreren) - uitleg

Laatst aangepast: .

Op verschillende manieren verticaal gepositioneerde tekst

Korte omschrijving

Verschillende manieren om één of meer regels met tekst verticaal te centreren of op gelijke afstand van elkaar te zetten.

De bovenste drie voorbeelden zijn elk gewoon één regel tekst die wordt gecentreerd met respectievelijk line-height, display: table-cell; en flexbox.

In het vierde voorbeeld worden drie regels tekst met behulp van <p>'s gelijk verdeeld.

In het vijfde voorbeeld wordt voor het verdelen een <span> met <br>'s gebruikt.

Het zesde en laatste voorbeeld gebruikt weer flexbox.

BELANGRIJK

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreekt bijvoorbeeld de navigatie voor de site. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n <h1> uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, kun je bovenaan de pagina de hele handel downloaden. In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

Als je deze handleiding graag uitprint (zonde van het bos), gebruik dan de pdf in de download. Deze pagina is niet geoptimaliseerd voor printen, de pdf kan wel makkelijk worden geprint.

Alles op deze site kan vrij worden gebruikt, met drie beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

Opmerkingen

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Achterliggend idee

Bij de vorige versie van dit voorbeeld bestond flexbox nog niet. Met behulp van flexbox is verticaal centreren heel simpel geworden. Omdat ook oudere technieken vaak prima bruikbaar zijn, zijn die gewoon blijven staan in deze versie. Nieuw zijn twee voorbeelden, waarbij flexbox wordt gebruikt.

Het verticaal centreren van tekst is relatief simpel. Dat het soms ingewikkeld lijkt, komt doordat veel mensen tekst proberen te centreren, alsof het een blok-element is. En dan wordt het vreselijk ingewikkeld.

In het eerste voorbeeld is aan de <p>, waarin de tekst staat, een regelhoogte van 4 em gegeven. Omdat tekst automatisch halverwege de regelhoogte wordt gezet, wordt de tekst automatisch verticaal gecentreerd binnen de <p>.

In het tweede voorbeeld wordt de tekst met behulp van display: table-cell; en vertical-align: middle; verticaal gecentreerd binnen een <div>. In het verleden werd dit heel vaak gedaan met behulp van html-tabellen: <table>, <td>, en dergelijke. Dat had enorme nadelen voor toegankelijkheid en het onderhoud was een nachtmerrie. Het gaat hier echter om css-tabellen, en die hebben die nadelen niet. De structuur van de pagina blijft hetzelfde, alleen het uiterlijk verandert.

Het derde voorbeeld is het simpelste en werkt het beste. In een <div> staat een <span> met de tekst. De <div> wordt met display: flex; in een zogenaamde 'flex container' veranderd. De inhoud van zo'n flex container is dodelijk simpel verticaal te centreren.

Te lange tekst verdubbelt de hoogte bij gebruik van line-height

De eerste drie voorbeelden bevatten alle drie maar één regel tekst. Zodra die tekst niet meer op één regel past, blijkt de eerste methode een groot nadeel te hebben. Omdat voor het centreren line-height is gebruikt, wordt de hoogte van de tekst twee keer zo groot.

Op de afbeelding is het browservenster te smal voor de tekst in het eerste voorbeeld. Wat niet op de eerste regel past, wordt op een nieuwe regel gezet. Met dezelfde regelhoogte, waardoor het blok met tekst dubbel zo hoog wordt. Dit kan ook gebeuren als de tekst wordt vergroot en daardoor niet meer past.

Bij de tweede methode met een css-tabel en de derde methode met flexbox is dit geen probleem. Omdat hier geen regelhoogte is opgegeven, blijft de tekst gewoon als één blok in het midden bij elkaar staan. De eerste methode is hierdoor eigenlijk alleen geschikt voor losstaande, korte woorden.

De methode met de css-tabel heeft wel een ander klein nadeel: VoiceOver op iOS 12 kondigt het begin van een tabel aan. De andere geteste schermlezers doen dit niet, maar in het verleden deed bijvoorbeeld NVDA dit ook. Meer hierover is te vinden bij Bekende problemen (en oplossingen).

De derde methode, die het nieuwe flexbox gebruikt, is de enige methode zonder enige ongewenste bijwerking.

In de onderste drie voorbeelden zijn meerdere regels tekst binnen een <div> op gelijke afstand van elkaar gezet.

In het vierde voorbeeld staat elke regel in een eigen <p>, die een regelhoogte heeft gekregen. Omdat de <p>'s even hoog zijn en tekst automatisch verticaal gecentreerd binnen de regel wordt neergezet, is de tekst gelijk verdeeld over de <div>.

In het vijfde voorbeeld staat de tekst in een <span>. Waar een nieuwe regel moet beginnen, staat een <br>. Ook hier wordt gebruik gemaakt van regelhoogte. Om de grootte van de <span> te laten zien, is de achtergrond daarvan gekleurd en heeft de <span> een randje gekregen.

Het zesde en laatste voorbeeld maakt weer gebruik van flexbox. Elke regel tekst staat in een <span>. De <span>'s staan weer in een <div>, die is veranderd in een flex container. Het is heel simpel om de ruimte tussen die <span>'s met behulp van flexbox gelijk te verdelen. De <span>'s zijn weer gekleurd en van een randje voorzien, zodat je de grootte kunt zien.

Normaal genomen wordt een <span> niet even breed als z'n ouder, maar deze <span>'s zijn veranderd in flex items, en daar gebeurt dat wel.

De twee methode met regelhoogte hebben weer hetzelfde nadeel: als de tekst niet op één regel past, wordt een compleet nieuwe regel met de opgegeven regelhoogte toegevoegd:

Te lange tekst verdubbelt de hoogte bij gebruik van line-height

Op de linkerafbeelding hierboven worden drie <p>'s met gelijke regelhoogte gebruikt. Het woordje 'een' in de middelste <p> past niet meer op de regel en komt dus op een nieuwe regel te staan. Waardoor de middelste <p> twee keer zo hoog wordt als de andere twee <p>'s.

Bij de middelste afbeelding gebeurt hetzelfde. De <span> heeft een regelhoogte, het woordje 'mijn' past niet meer op de regel, dus wordt een volledige regel toegevoegd met dezelfde regelhoogte als de andere.

Omdat de hoogte van de <div>'s afhankelijk is van de regelhoogte, wordt ook de <div> plotsklaps een stuk hoger. Dat kan de indeling van de pagina behoorlijk om zeep helpen.

De derde methode met flexbox heeft deze nadelen niet. De tekst blijft bij elkaar staan, ook als de tekst niet op één regel past. Hierdoor wordt de <div> ook niet hoger.

Welke methode is het beste?

Dat is eigenlijk heel simpel: flexbox. De methode met flexbox is de enige die geen enkele ongewenste bijwerking heeft.

Bij de drie methodes die line-height gebruiken, wordt een grote regelhoogte gebruikt. Zodra de tekst niet meer op één regel past, komt er zo'n grote regelhoogte bij. Waardoor ook de <div> een stuk groter wordt. Deze methoden zijn daardoor eigenlijk alleen veilig te gebruiken, als je 'n enkel woord of zo moet centreren. Zodra de lettergrootte te groot wordt, of als er per ongeluk iets te veel tekst in staat, of als het browservenster te smal wordt, of ..., loop je het risico van een ongewenste verdubbeling van de hoogte. Of zelfs meer dan een verdubbeling, bij meer regels tekst.

De methode met table-cell heeft dit nadeel niet, maar sommige schermlezers raken daar spontaan zo enthousiast van dat ze 'begin van een tabel' of zoiets beginnen te roepen. (Meer hierover bij Bekende problemen (en oplossingen) onder het kopje Schermlezers.)

Flexbox is de enige methode die geen van deze bijwerkingen heeft. Bovendien worden de vier regels tekst in het zesde voorbeeld als een gewone, doorlopende tekst beschouwd. Wat ze ook zijn, want het zijn vier stukken tekst in een <span>, zonder <br> of zoiets. Dat ze ook flex items zijn, heeft daar geen invloed op.

In de enkele fossiele browser die flexbox nog niet ondersteunt, wordt de tekst gewoon weergegeven. Alleen staat deze niet verticaal gecentreerd of verdeeld in die browsers.

De voorvoegsels -moz-, -ms- en -webkit-

Voordat een nieuwe css-eigenschap wordt ingevoerd, is er in de regel een experimentele fase. Browsers passen het dan al toe, maar met een aangepaste naam. Tijdens deze fase kunnen problemen worden opgelost en worden veldslagen uitgevochten, over hoe de standaard precies moet worden toegepast.

Als iedereen het overal over eens is en alle problemen zijn opgelost, wordt de officiële naam uit de standaard gebruikt.

De belangrijkste browsers hebben elk een eigen voorvoegsel:

Firefox: -moz-, naar de maker: Mozilla.

Op webkit gebaseerde browsers, zoals Google Chrome, Opera, Safari en Android browser: -webkit-.

(Google Chrome is van webkit overgestapt op een eigen weergave-machine: Blink. Blink gaat geen voorvoegsels gebruiken. Het is echter een aftakking van webkit, dus het zal nog wel even duren voor -webkit- hier helemaal uit is verdwenen. Ook Opera gebruikt Blink.)

Internet Explorer: -ms-, naar de maker: Microsoft. (Edge gebruikt geen voorvoegsels, maar vanwege compatibiliteit met oudere sites kunnen er nog wat aanwezig zijn.)

Zodra de experimentele fase voorbij is, wordt het voorvoegsel weggelaten. Omdat dat moment niet bij alle browsers hetzelfde is, zet je nu ook al de officiële naam erbij. Deze wordt als laatste opgegeven. Bijvoorbeeld Android browser herkent -webkit-linear-gradient. Zodra Android browser linear-gradient gaat herkennen, zal dit -webkit-linear-gradient overrulen, omdat het er later in staat. Dat ze er beide in staan, is dus geen enkel probleem.

In dit voorbeeld wordt box-decoration-break gebruikt.

box-decoration-break

Op dit moment moet je nog het volgende schrijven:

{-webkit-box-decoration-break: ...; box-decoration-break: ...;}

In de toekomst kun je volstaan met:

{box-decoration-break: ...;}

Inmiddels is de algemene mening dat 'vendor prefixes', zoals deze voorvoegsels in het Engels heten, geen groot succes zijn. Eén van de grootste problemen: veel sitemakers gebruiken alleen de -webkit-variant. Daar kwamen ze in het verleden nog mee weg, omdat Apple op mobiel zo'n beetje 'n monopolie had. Inmiddels is dat niet meer zo, maar deze gewoonte bestaat nog steeds. Waardoor 'n site alleen in op webkit georiënteerde browsers goed is te bekijken.

Dit is zo'n groot probleem dat andere browsers soms de variant met -webkit- ook maar zijn gaan implementeren, naast de standaard. Want als 'n site het niet goed doet in 'n bepaalde browser, krijgt in de regel niet de site maar de browser de schuld.

Vanwege alle problemen met 'vendor prefixes' worden deze door steeds meer browsers niet meer gebruikt. Nieuwe, experimentele css-eigenschappen zitten inmiddels in bijvoorbeeld Firefox, Google Chrome en Safari achter een zogenaamde vlag: de gebruiker moet iets veranderen in de instellingen, waarna de eigenschap gebruikt (en getest) kan worden. Als alles werkt, zoals het hoort te werken, schakelt de browsermaker de vlag standaard in.

Voorlopig zijn we echter nog niet van deze voorvoegsels af. Als je ze gebruikt, gebruik dan álle varianten, en eindig met de variant zonder voorvoegsel, zoals die uiteindelijk ooit gebruikt gaat worden. Als je alleen de -webkit-variant gebruikt, ben je in feite 'n onbetaalde reclamemaker voor Apple.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

De tekst in dit hoofdstukje is een algemene tekst, die voor elke pagina geldt. Eventueel specifiek voor dit voorbeeld geldende problemen en eventuele aanpassingen om die problemen te voorkomen staan bij Bekende problemen (en oplossingen).

Toegankelijkheid (in het Engels 'accessibility') is belangrijk voor bijvoorbeeld blinden die een schermlezer gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje dat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 17 juni 2019.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Alle eventuele problemen, ook die met betrekking tot zoomen, lettergroottes, toegankelijkheid, uit staan van JavaScript en/of css, enzovoort staan iets hieronder bij Bekende problemen (en oplossingen). Het is belangrijk dat deel te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Dit voorbeeld is getest op de volgende systemen:

Desktopcomputers

Windows 7 (1280 x 1024 px, resolution 96 dpi):
Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.

OS X 10.11.6 ('El Capitan') (1680 x 1050 px, resolution: 96: dpi, device-pixel-ratio: 1):
Firefox, Safari, Opera en Google Chrome, in grotere en kleinere browservensters.

Linux (Kubuntu 18.04 LTS, 'Bionic Beaver') (2560 x 1080 px, resolution: 96 dpi):
Firefox, Opera en Google Chrome, in grotere en kleinere browservensters.

Laptops

Windows 8.1 (1366 x 768 px, resolution: 96 dpi):
Bureaublad-versie: Firefox, UC Browser, Google Chrome, Opera en Internet Explorer 11, in grotere en kleinere browservensters.
Startscherm-versie: Internet Explorer 11.

Windows 10 (1600 x 900 px, resolution: 96 dpi):
Firefox, UC Browser, Google Chrome, Opera, Internet Explorer 11 en Edge, in grotere en kleinere browservensters.

Tablets

iPad met iOS 9.3.5 (1024 x768 px, device-pixel-ratio: 1):
Safari, Chrome for iOS, UC Browser, Firefox (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

iPad met iOS 12.3.1 (2048 x 1536 px, device-pixel-ratio: 2 ('retina'):
Safari, Chrome for iOS, Firefox, Microsoft Edge (alle portret en landschap).
Opera Mini (Opera Turbo) portret en landschap.

Android 4.4.2 ('Kitkat') (1280 x 800 px, resolution: 96 dpi):
UC Browser, Firefox en Chrome (alle portret en landschap).

Android 4.4.2 ('Kitkat') (2560 x 1600 px, resolution: 192 dpi):
Android browser, UC Browser, Firefox en Chrome (alle portret en landschap).

Android 6.0 ('Marshmallow') (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Android 8.1.0 ('Oreo') (1920 x 1200 px, resolution: 144 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Smartphones

Windows 10 Mobile (1280 x 720 px, resolution: 192 dpi):
Edge en UC browser (portret en landschap).

Android 4.1.2 ('Jelly Bean') (800 x 480 px, resolution: 144 dpi):
Chrome, UC Browser, Firefox en Opera for Android (alle portret en landschap).

Android 8.1.0 ('Oreo') (1280 x 720 px, resolution: 192 dpi):
Dolphin, Samsung Internet, UC Browser, Firefox, Microsoft Edge en Chrome (alle portret en landschap).
Opera Mini (besparingen uitgeschakeld) portret en landschap.

Er is op de aan het begin van dit hoofdstukje genoemde controledatum getest in de meest recente versie van de browser, die op het betreffende besturingssysteem kon draaien. Het aantal geteste browsers en systemen is al tamelijk fors, en als ook nog rekening gehouden moet worden met (zwaar) verouderde browsers, is het gewoon niet meer te doen. Surfen met een verouderde browser is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken.

In- en uitzoomen en – voor zover de browser dat kan – een kleinere en grotere letter zijn ook getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan 200%.

Er is getest met behulp van muis en toetsenbord, behalve op iOS, Android en Windows 10 Mobile, waar een touchscreen is gebruikt. Op Windows 8.1 en 10 is getest met touchscreen, touchpad, toetsenbord, muis, en – waar dat zinvol was – op een combinatie daarvan.

Als JavaScript is gebruikt, is op de desktop ook getest zonder JavaScript. Op iOS, Android en Windows 10 Mobile is niet getest zonder JavaScript, omdat je JavaScript in een toenemend aantal mobiele browsers niet uit kunt zetten. Bovendien is een mobiel apparaat zonder JavaScript niet veel meer dan een duur en groot uitgevallen horloge. Ook in Edge is niet getest zonder JavaScript, omdat Microsoft het onmogelijk heeft gemaakt dit uit te zetten. Ten slotte is getest zonder css en – als afbeeldingen worden gebruikt – zonder afbeeldingen.

Schermlezers en dergelijke

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA, TalkBack, VoiceOver, ChromeVox en Verteller.

Lynx is een browser die alleen tekst laat zien en geen css gebruikt. Er is getest op Linux.

WebbIE. is een browser die gericht is op mensen met een handicap. Er is getest op Windows7. (LET OP: kies voor 'Install WebbIE 4 Web Browser Now'. Dat is – op het moment van schrijven – de een na bovenste knop. Als je voor de bovenste download kiest, krijg je 'n hele berg hulpprogramma's erbij, waar je voor het testen niets aan hebt.)

NVDA is een schermlezer, zoals die door blinden wordt gebruikt. Er is getest op Windows 7 en Windows 10 in combinatie met Firefox.

TalkBack is een in Android ingebouwde schermlezer. Er is getest in combinatie met Chrome op Android 4.4,2, 6.0, 7.0 en 8.1.0.

VoiceOver is een in iOS en OS X ingebouwde schermlezer. Er is getest in combinatie met Safari op iOS (9.3.5 en 12.3.1) en OS X 10.11.6.

ChromeVox is een schermlezer in de vorm van een extensie bij Google Chrome. Er is getest op een systeem met Kubuntu Linux 18.04.

Verteller (Narrator) is een in Windows 10 ingebouwde schermlezer. Er is getest in combinatie met Edge.

(Voor de bovenstaande programma's zijn links naar sites met uitleg en dergelijke te vinden op de pagina met links onder Toegankelijkheid → Schermlezers, tekstbrowsers, en dergelijke.)

Als het voorbeeld in deze programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde.

Eventuele problemen in schermlezers (en eventuele aanpassingen om die te voorkomen) staan iets hieronder bij Bekende problemen (en oplossingen).

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. Er is een kans dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je soms (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Samsung Internet op Android werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar geen beginnen aan.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen (en oplossingen) vermeld.

Nieuwe browsers worden pas getest, als ze uit het bèta-stadium zijn. Anders is er 'n redelijke kans dat je tegen 'n bug zit te vechten, die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kunnen niet worden beantwoord, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enzovoort in wel geteste browsers: graag! Dat kan op het forum.)

Bekende problemen (en oplossingen)

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Als je hieronder geen oplossing vindt voor een probleem dat met dit voorbeeld te maken heeft, kun je op het forum proberen een oplossing te vinden voor je probleem. Om forumspam te voorkomen, moet je je helaas wel registreren, voordat je op het forum een probleem kunt aankaarten.

Bij toegankelijkheid is er vaak geen goed onderscheid te maken tussen oplossing en probleem. Zonder (heel simpele) aanpassingen heb je vaak 'n probleem, en omgekeerd. Daarom staan wat betreft toegankelijkheid aanpassingen en problemen hier bij elkaar in dit hoofdstukje.

Voor zover van toepassing wordt eerst het ontbreken van JavaScript, css en/of afbeeldingen besproken. Vervolgens problemen en aanpassingen met betrekking tot toegankelijkheid voor specifieke groepen bezoekers, zoals zoomen en andere lettergrootte, Tab-toets, tekstbrowsers en schermlezers. Als laatste volgen algemene problemen in alle of in specifieke browsers.

Als in een onderdeel één of meer problemen worden besproken, staat in een breed rood kadertje een korte samenvatting daarvan. Bij een onderwerp over toegankelijkheid zijn er soms geen problemen, maar alleen aanpassingen. In dat geval staat in een smal groen kadertje 'Geen problemen'.

Zonder JavaScript

Geen problemen.

Omdat er geen JavaScript wordt gebruikt, zijn er (uiteraard) ook geen problemen als JavaScript uit staat.

Zonder css

Geen problemen.

Alles werkt zonder css, alleen ziet het er natuurlijk niet uit.

Ook als de tekst niet op één regel past, staat de tekst uit het eerste, tweede en derde voorbeeld gewoon bij elkaar. (Bij het tweede en derde voorbeeld is dat ook met css het geval, en bij het eerste voorbeeld werkt line-height niet.)

In het vierde voorbeeld staat elke regel in een eigen <p>, dus zonder css staan de drie regels onder elkaar. Met een marge ertussen, omdat dat standaard zo is bij een <p>.

Bij het vijfde voorbeeld staat de tekst in een aantal <span>'s met achter elke <span> een <br>. Deze tekst staat dus altijd op vier regels, want de <br> staat in de html. Als alle vier de regels te lang zouden zijn, levert dit dus acht regels op.

Bij het zesde voorbeeld staat de tekst ook in <span>'s, maar nu zonder <br>'s. Deze tekst wordt gewoon op de normale manier achter elkaar gezet. (Ook hier blijkt flexbox dus weer het best te werken.)

Gebruikers Tabtoets

Geen problemen.

Deze constructies hebben op geen enkele manier invloed op het gebruik van de Tab-toets om links en dergelijke af te lopen.

Tekstbrowsers

Geen problemen.

Lynx en WebbIE geven de tekst op precies dezelfde manier weer, als iets hierboven is beschreven bij Zonder css.

Schermlezers

Probleem: VoiceOver op iOS 12 leest 'begin van tabel' voor bij het derde voorbeeld.

Alle geteste schermlezers lezen zonder enig probleem de tekst correct voor. Maar VoiceOver op iOS 12.3.1 zegt bij het tweede voorbeeld 'begin van tabel' na het voorlezen van 'Verticaal gecentreerd (table-cell).' VoiceOver op iOS 9.3.5 en OS X 10.11.6 doen dat niet.

In het verleden deed ook NVDA dit, maar nu niet meer. Mogelijk zijn er nog andere niet-geteste schermlezers die dit ook doen. Uiterst vreemd, want de bedoeling van css is nou juist dat het min of meer wordt genegeerd door schermlezers. Voor een échte tabel gebruik je <table> in de html, en dat moet niet worden genegeerd.

Ook het toevoegen van role="presentation" bij div#drie en/of de daarin zittende <span> had geen effect. Het weglaten van display: table; bij div#twee maakte ook niets uit (maar maakte wel 'n aantal dingen ingewikkelder, dus dat is blijven staan.)

Kennelijk heeft Apple dus ergens tussen iOS 9.3.5 en iOS 12.3.1 besloten dat dit een goed idee was. Zoals gebruikelijk bij Apple is er echter geen enkele documentatie te vinden, dus het is onduidelijk of dit mogelijk niet toch een bug is.

In het verleden is de methode met table-cell heel veel gebruikt om tekst verticaal te centreren, dus deze melding zal door VoiceOver heel vaak ten onrechte worden gegeven.

Bij flexbox speelt dit probleem niet. Oftewel: flexbox blijkt weer het best te werken.

Zoomen en lettergroottes

Geen problemen.

Als de tekst te lang is om op één regel te staan, wordt bij het eerste, vierde en vijfde voorbeeld een volledige regel (met grote regelhoogte) toegevoegd, waardoor de ouder-<div> ook in hoogte toeneemt. Alles blijft gewoon leesbaar, maar dit kan de lay-out van de pagina verstoren. Als je flexbox gebruikt, zoals in het derde en zesde voorbeeld, speelt dit probleem niet. Meer hierover is te vinden bij Achterliggend idee.

(Bij het tweede voorbeeld met table-cell speelt dit probleem ook niet, maar zoals gelijk hierboven bij Schermlezers beschreven, kondigen sommige schermlezers dan een tabel aan.)

UC browser op Windows 10 Mobile en tablet met Android 4.4.2 lage resolutie en Android browser

Probleem: de tekst in het derde en zesde voorbeeld staat zonder tussenruimte bovenin.

Tekst in het zesde voorbeeld staat tegen elkaar aan

Vreemd genoeg speelt dit probleem niet in UC browser op de tablet met hoge resolutie en Android 4.4.2.

Deze browsers zetten op de genoemde systemen de tekst in het derde en zesde voorbeeld gewoon tegen elkaar aan, zonder enige tussenruimte, omdat justify-content: space-around; niet wordt ondersteund.

Omdat aan de <div>, waarin de <span>'s met de tekst staan, een hoogte is gegeven, blijft aan de onderkant van het zesde voorbeeld een lege ruimte over. Op de afbeelding is dat de witte rechthoek aan de onderkant. Het derde voorbeeld is niet afgebeeld, maar ook daarin blijft aan de onderkant een lege ruimte over.

UC browser op deze versie van Android wordt nauwelijks nog gebruikt. Windows 10 Mobile wordt – op het moment van schrijven – nog maar 'n paar maanden ondersteund en verdwijnt dan helemaal. Android browser wordt na Android 4.4 niet meer geleverd en wordt nauwelijks nog gebruikt.

Omdat de tekst gewoon leesbaar is en deze browsers vrijwel zijn uitgestorven, is niet naar een oplossing gezocht.

Internet Explorer 11

Probleem: bug bij gebruik van min-height bij een flex container.

Oorspronkelijk werd bij div#zes niet height: 12em; maar min-height: 12em; gebruikt. Als de <span>'s met tekst dan niet binnen de <div> passen (bijvoorbeeld omdat de letters sterk zijn vergroot), groeit de <div> gewoon mee met de <span>'s. De witte achtergrondkleur en de border van de <div> groeien dan ook gewoon mee.

Bij gebruik van height groeit de <div> niet mee. De <span>'s kunnen daardoor buiten de witte achtergrondkleur en border van de <div> komen te staan. Bovendien kunnen ze onder eventueel lager staande elementen verdwijnen, of deze juist afdekken. Problemen die je allemaal kunt voorkomen door min-height te gebruiken in plaats van height.

In het voorbeeld speelt dit allemaal niet, daarom kan hier gewoon height worden gebruikt.

Maar als dat min-height dan zo paradijselijk is, waarom gebruik je dan height?

Masochisme? Pesterij? Steekje los?

Er zit inderdaad een steekje los, of feitelijk een hele breinaald. Maar dan bij Internet Explorer.

Met behulp van display: flex; is div#zes in een flex container veranderd. De tekst binnen de <div> wordt met behulp van justify-content: space-around; verticaal verdeeld. Maar als je bij een flex container de hoogte aangeeft met min-height, negeert Internet Explorer justify-content. De tekst wordt dan gewoon tegen elkaar aan gezet. Datzelfde gebeurt bij oudere browsers die justify-content niet ondersteunen en is te zien op de afbeelding iets hierboven.

Door min-height te vervangen door height werkt het ook in Internet Explorer.

Als om een of andere reden height niet kan worden gebruikt, is het ook op een andere manier op te lossen. Als je div#zes zelf ook weer in een <div> of zoiets zet, en die buitenste <div> ook display: flex; geeft, werkt min-height plotsklaps wel.

Meer over deze bug (en de oplossing) is te vinden bij de derde bug op github.com/philipwalton/flexbugs.

Internet Explorer, Edge en oudere versies van UC browser en Opera Mini op Android.

Probleem: de tekst in het vijfde voorbeeld mist een deel van de border.

Dit heeft eigenlijk niets met dit voorbeeld te maken en is nauwelijks een echt probleem, dus een oplossing is niet nodig. Het staat hier alleen voor de volledigheid.

De tekst binnen het vijfde voorbeeld staat allemaal binnen dezelfde <span>. Om de grootte van die <span> aan te geven, wordt een achtergrondkleur gebruikt. Omdat sommige mensen moeite hebben met het onderscheiden van kleuren, staat ook een gestippeld randje rondom de <span>. Op de afbeelding hieronder is het gestippelde randje vervangen door een gewone lijn, omdat dat duidelijker is.

Met en zonder box-decoration-break

Een <span> is een inline-element. Als een inline-element een border krijgt, wordt die border normaal genomen alleen aan de boven- en onderkant neergezet, en helemaal aan het begin en helemaal aan het einde. Dat is te zien op de afbeelding rechts.

Op de linkerafbeelding is box-decoration-break: clone; gebruikt. Nu wordt de border overal aan de linker- en rechterkant neergezet.

In browsers die box-decoration-break niet ondersteunen, missen die borders links en rechts (behalve helemaal aan het begin en helemaal aan het eind).

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

Nieuw opgenomen.

7 april 2009:

Tekst aangepast aan de nieuw verschenen Internet Explorer 8. De code is niet veranderd.

14 november 2010:

Op aantal plaatsen color: black; toegevoegd vanwege toegankelijkheid. In de beschrijving wordt op de betreffende plaatsen uitgelegd waarom.

16 juni 2019:

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

* Je gebruikt het materiaal uit deze download volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte code en dergelijke zitten. Voor eventuele schade die door gebruik van materiaal uit deze download ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

positioneren-038-dl.html: de pagina met het voorbeeld.

positioneren-038.pdf: deze uitleg (aangepast aan de inhoud van de download).

positioneren-038-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

038-css-dl:

positioneren-038-dl.css: stylesheet voor positioneren-038-dl.html.

HTML

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

In de html hieronder wordt alleen de html besproken, waarover iets meer is te vertellen. Een <h1> bijvoorbeeld wordt in de regel niet genoemd, omdat daarover weinig interessants valt te melden. (Als bijvoorbeeld het uiterlijk van de <h1> wordt aangepast met behulp van css, staat dat verderop bij de bespreking van de css.)

Zaken als een doctype en charset hebben soms wat voor veel mensen onbekende effecten, dus daarover wordt hieronder wel een en ander geschreven.

<!doctype html>

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.

Gebruik het volledige doctype, inclusief de eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan zonder enig probleem worden gebruikt: het werkt zelfs in Internet Explorer 6.

<html lang="nl">

De toevoeging lang="nl" bij <html> geeft aan dat de pagina in het Nederlands is. De taal is van belang voor schermlezers, automatisch afbreken, automatisch genereren van aanhalingstekens, juist gebruik van decimale punt of komma, en dergelijke.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code, dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de <head>, omdat hij anders door sommige browsers niet wordt gelezen.

In html5 hoeft deze regel niet langer te zijn, dan wat hier staat.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorm in grootte. En dat is een probleem. Sites waren, in ieder geval tot enkele jaren geleden, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede browservensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enzovoort, maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. In dit voorbeeld bijvoorbeeld wordt de pagina nooit breder dan het venster.

Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook deze pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die wordt niet gebruikt. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

CSS

De code is geschreven in een afwijkende lettersoort. De code die te maken heeft met de basis van dit voorbeeld (essentiële code) is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles in een gewone letter vanwege de leesbaarheid.)

Technisch gezien is er geen enkel bezwaar om de css in de stylesheet allemaal achter elkaar op één regel te zetten:

div#header-buiten {position: absolute; right: 16px; width: 100%; height: 120px; background: yellow;} div p {margin-left 16px; height: 120px; text-align: center;}

Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Beter is het om de css netjes in te laten springen:

              div#header-buiten {
            position: absolute;
            right: 16px;
            width: 100%;
            height: 120px;
            background: yellow;
        }

        div p {
            margin-left: 16px;
            height: 120px;
            text-align: center;
        }

Hiernaast is het heel belangrijk voldoende commentaar (uitleg) in de stylesheet te schrijven. Op dit moment weet je waarschijnlijk (hopelijk...), waarom je iets doet. Maar over vijf jaar kan dat volstrekt onduidelijk zijn. Op deze site vind je nauwelijks commentaar in de stylesheets, maar dat heeft een simpele reden: deze uitleg is in feite één groot commentaar.

Op internet zelf is het goed, als de stylesheet juist zo klein mogelijk is. Dus voor het uploaden kun je normaal genomen het beste het commentaar weer verwijderen. Veel mensen halen zelfs alles wat overbodig is weg, voordat ze de stylesheet uploaden. Inspringingen bijvoorbeeld zijn voor mensen handig, een computer heeft ze niet nodig.

Je hebt dan eigenlijk twee stylesheets. De uitgebreide versie waarin je dingen uitprobeert, verandert, enzovoort, met commentaar, inspringingen, en dergelijke. Dat is de mensvriendelijke versie. Daarnaast is er dan een stylesheet die je op de echte site gebruikt: een gecomprimeerde versie.

Dat comprimeren kun je met de hand doen, maar er bestaan ook hulpmiddelen voor. Op de pagina met links kun je onder het kopje Gereedschap → Snelheid, testen, gzip, comprimeren (inclusief theorie) links naar sites vinden, waar je bestanden kunt comprimeren.

(Stylesheets op deze site zijn niet gecomprimeerd. Omdat het vaak juist om de css gaat, kunnen mensen dan zonder al te veel moeite de css bekijken.)

/* positioneren-038-dl.css */

Om vergissingen te voorkomen is het een goede gewoonte bovenaan het stijlbestand even de naam neer te zetten. Voor je het weet, zit je anders in het verkeerde bestand te werken.

body

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de nakomelingen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

background: #ff9;

Achtergrondkleurtje.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

font-family: Arial, Helvetica, sans-serif;

Als Arial is geïnstalleerd op de machine van de bezoeker, wordt deze gebruikt, anders Helvetica. Als die ook niet wordt gevonden, wordt in ieder geval een schreefloze letter (zonder dwarsstreepjes) gebruikt.

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Als eenheid wordt de relatieve eenheid % gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

margin: 0; padding: 0;

Slim om te doen vanwege verschillen tussen browsers.

(Mogelijk is padding niet meer nodig, maar in het verleden verschilde de standaard-padding tussen browsers. Het is simpeler om dit gewoon te blijven gebruiken dan om een uitgebreide test uit te gaan voeren om te kijken, of dit nog wel nodig is.)

div

Alle <div>'s. Elk voorbeeld zit in een eigen <div>. Een groot deel van de eigenschappen van alle <div>'s is hetzelfde en kan hier in één keer voor allemaal worden opgegeven.

background: white;

Witte achtergrond.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

width: 600px;

Breedte.

max-width: 98vw;

Hier gelijk boven is een breedte van 600 px opgegeven. In browservensters smaller dan 600 px moet je daardoor horizontaal scrollen om alles te kunnen zien. Daarom wordt hier een maximumbreedte opgegeven.

1 vw is 1% van de breedte van het venster van de browser. 98 vw is dus 98% van die breedte. Hierdoor wordt de pagina nooit breder dan 98% van het venster, ongeacht hoe breed dat venster is.

(Oorspronkelijk werd hier 98% gebruikt, dat werkt precies hetzelfde in dit geval. Althans: dat zou zo moeten zijn. Maar in Google Chrome blijkt bij het tweede voorbeeld 98% niet te werken en 98 vw wel.)

text-align: center;

Tekst horizontaal centreren.

margin: 10px auto;

Omdat voor onder en links geen waarde is opgegeven, worden die automatisch hetzelfde als boven en rechts. Hier staat dus eigenlijk 10px auto 10px auto in de volgorde boven – rechts – onder – links.

Boven en onder een marge van 10 px voor wat afstand tussen de <div>'s. Dat zou tussen twee <div>'s 20 px moeten opleveren, maar dat is niet zo. Als twee verticale marges elkaar raken, wordt normaal genomen alleen de grootste marge gebruikt. Hier zijn de marges aan boven- en onderkant allebei 10 px, dus hier wordt een marge van 10 px gebruikt.

Links en rechts auto, wat in dit geval hetzelfde betekent als evenveel. Hierdoor staan de <div>'s altijd horizontaal gecentreerd binnen hun ouder, ongeacht de ouder van de <div>'s.

De ouder van de <div>'s is <main>, een blok-element. Een blok-element wordt normaal genomen automatisch even breed als z'n ouder. De ouder van <main> is <body>, ook weer een blok-element. Ook <body> wordt normaal genomen even breed als z'n ouder <html>. Omdat <html> het buitenste element is, wordt dit normaal genomen even breed als het venster van de browser.

Uiteindelijk staan de <div>'s hierdoor altijd horizontaal gecentreerd binnen het venster van de browser, ongeacht de breedte van het venster.

border: black solid 1px;

Zwart randje rondom de <div>'s.

#een

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div {background: white; color: black; width: 600px; max-width: 98vw; text-align: center; margin: 10px auto; border: black solid 1px;}

Het element met id="een". De <div> waar het eerste voorbeeld in zit.

line-height: 4em;

Regelhoogte.

Omdat geen gewone hoogte wordt opgegeven, is dit ook de hoogte van de <div>. En omdat tekst altijd halverwege de regelhoogte wordt neergezet, staat de tekst verticaal gecentreerd binnen de <div>.

Als de tekst niet meer op één regel past, bijvoorbeeld omdat de lettergrootte is verhoogd, komt de niet passende tekst op een nieuwe regel te staan. Die ook weer een regelhoogte van 4 em heeft. Daardoor wordt de <div> nu plotsklaps 8 em hoog. Bij Achterliggend idee is hiervan een afbeelding te zien. Dit kan de lay-out van de pagina fors ontregelen.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px de regelhoogte niet in alle browsers mee verandert met de lettergrootte. Zoomen kan wel altijd, ongeacht welke eenheid voor de regelhoogte wordt gebruikt.

#twee

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div {background: white; color: black; width: 600px; max-width: 98vw; text-align: center; margin: 10px auto; border: black solid 1px;}

Het element met id="twee". De <div> waar het tweede voorbeeld in zit.

display: table;

De <div> weergeven als tabel.

Vermoedelijk begint een aantal mensen nu te gruwelen. Een tabel terwijl er geen tabulaire gegevens zijn. Dat heeft in het verleden de meeste sites volstrekt ontoegankelijk gemaakt voor schermlezers, zoekmachines, enzovoort. En het was een nachtmerrie om te onderhouden.

Dit is echter een css-tabel, en dat is een heel ander verhaal dan een met <table> gemaakte html-tabel. Hier worden alleen de weergave-eigenschappen van een tabel gebruikt, niet de semantische betekenis. (Semantiek betekent dat je bijvoorbeeld een kopregel in een <h> zet, een knop in een <button>, en dergelijke.)

Hier iets onder bij #twee p wordt met display: table-cell; de <p> weergegeven als een cel uit een tabel. Als je dat op deze manier doet (niet in de html, maar met css), zet de browser er automatisch een tabel, rij, en dergelijke omheen. Van die tabel en dergelijke merk je verder helemaal niets: het zijn zogenaamde anonieme elementen.

Eigenlijk is deze display: table; dus niet nodig. Maar de tabel die de browser maakt, trekt zich niets aan van de bij div opgegeven breedte en dergelijke. Daarom is het het makkelijkste om hier zelf een tabel te maken.

height: 4em;

Hoogte.

Omdat er in deze 'tabel' maar één cel zit, is dit ook de hoogte van die cel.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij een absolute eenheid als px de hoogte van de <div> niet mee verandert met de lettergrootte.

#twee p

Alle <p>'s binnen het element met id="twee". Dat is er hier maar een: de <p> waar de tekst uit het tweede voorbeeld in zit.

display: table-cell;

De <p> weergeven als een cel uit een tabel. Omdat het hier om css gaat en niet om html, heeft dit geen invloed op toegankelijkheid en dergelijke. Iets meer hierover is gelijk hierboven bij #twee te vinden.

Het voordeel hiervan is dat je nu de eigenschappen van een cel kunt gebruiken, zoals vertical-align.

vertical-align: middle;

De tekst verticaal in het midden zetten.

#drie

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div {background: white; color: black; width: 600px; max-width: 98vw; text-align: center; margin: 10px auto; border: black solid 1px;}

Het element met id="drie". De <div> waar het derde voorbeeld in zit.

display: flex;

Met behulp van deze eigenschap wordt van div#drie een zogenaamde 'flex container' gemaakt. Het is onderdeel van flexbox, een verzameling eigenschappen die het makkelijker maken de pagina op een bepaalde manier in te delen.

De directe kinderen van een flex container zijn 'flex items'. In dit geval is er maar één kind: de <span> met de tekst binnen div#drie.

Alleen de directe kinderen van een flex container zijn flex items:

<div id="drie"> <span></span> </div>

Bovenstaande <span> is een direct kind van div#drie.

<div id="drie"> <p> <span></span> </p> </div>

Deze <span> is geen direct kind van div#drie, omdat er een <p> tussen de <div> en de <span> zit.

Met behulp van flexbox kunnen flex items op allerlei manieren worden neergezet binnen de flex container.

Flex items gedragen zich zelf weer als een normaal element voor wat betreft hun eigen nakomelingen. Als je binnen de <span> bijvoorbeeld een <img> zou zetten, gedraagt die <img> zich op precies dezelfde manier als bij een 'gewone' <span>.

Verschil tussen een gewone span en een span als flex item

Voor het flex item zelf, hier de <span>, ligt het iets anders. Als je display: flex; weghaalt, gedraagt de <span> zich als een gewone <span>. Op de bovenste afbeelding is dit te zien: de groene <span> is een gewoon inline-element en wordt daarom niet breder dan nodig is om de tekst erin weer te geven. Bovendien staat de <span> niet verticaal gecentreerd, maar gewoon bovenin de witte <div>. (De <span> staat wel horizontaal gecentreerd, omdat bij div text-align: center; is opgegeven.)

Op de onderste afbeelding is van div#drie met display: flex; weer een flex container gemaakt, en is de groene <span> dus veranderd in een flex item. Nu blijkt de <span> even breed te worden als z'n ouder. Bovendien staat de <span>, en daarmee ook de erin zittende tekst, nu verticaal gecentreerd binnen de witte <div>. Dat verticaal centreren komt door de iets hieronder gebruikte eigenschap justify-content: space-around;, ook een onderdeel van flexbox.

flex-direction: column;

Met deze eigenschap wordt de richting van de hoofdas (in het Engels: 'main axis') aangegeven. Standaard heeft flex-direction de waarde 'row': horizontaal, waardoor de flex items naast elkaar komen te staan: op één regel. Hier moeten de flex items niet naast, maar onder elkaar komen te staan, in een kolom. (Dat hier slechts één flex item, een <span>, aanwezig is, maakt voor de werking geen verschil.)

De gebruikte sleutelwoorden 'row' en 'column' zijn in het begin wat verwarrend, omdat de flex items juist andersom worden weergegeven. Als je hier 'column' gebruikt, wordt de <span> als een regel, als 'row', neergezet.

Maar flex-direction heeft geen betrekking op de flex items, maar op de flex container, hier div#drie. 'column' verandert de flex container in een kolom.

flex item met flex-direction: row

Bij een aantal eigenschappen is de richting van de hoofdas van belang. Omdat deze hier verticaal is (de flex container is een kolom), is de richting van bijvoorbeeld justify-content ook verticaal en komt lege ruimte boven en onder het flex item te staan. Zou hier flex-direction: row; hebben gestaan, dan zou de flex container een regel zijn en zou justify-content lege ruimte links en rechts van het flex item neerzetten. Dat is wat op de afbeelding gebeurt: het flex item, de <span>, staat netjes gecentreerd, maar wel in de verkeerde richting.

Het is even wennen, maar juist dit soort dingen maakt flexbox zo flexibel.

justify-content: space-around;

Zet rondom de flex items aan beide kanten evenveel lege ruimte. Omdat hierboven flex-direction: column; is gebruikt, gaat het om de ruimte boven en onder de flex items. Omdat er hier maar één flex item is, komt dit hierdoor precies verticaal in het midden van de <div> te staan. Oftewel: de <span> met de tekst staat verticaal gecentreerd binnen de <div>.

Waar je nog niet zo lang geleden soms de meest ingewikkelde dingen moest uithalen om iets verticaal te centreren, volstaan nu deze paar regels. Die bovendien geen bijwerkingen hebben op het gebied van toegankelijkheid en dergelijke.

height: 4em;

Hoogte.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij een absolute eenheid als px de hoogte van de <div> niet mee verandert met de lettergrootte.

#drie span

Alle <span>'s binnen het element met id="drie". Dat is er hier maar één.

Deze <span> is een direct kind van div#drie, die bij #drie met display: flex; in een flex container is veranderd. Daardoor is deze <span> een flex item. Dit houdt in dit geval in dat de <span> even breed wordt als z'n ouder en makkelijk verticaal is te centreren binnen z'n ouder. Meer hierover is te vinden bij #drie.

background: #9f3;

Groen achtergrondkleurtje, zodat de grootte van de <span> is te zien.

border: dotted black;

Gestippeld randje. Mensen die moeite hebben met kleuren, kunnen nu ook de grootte van de <span> zien. Gelijk hieronder wordt de breedte van de border opgegeven.

border-width: 1px 0;

Gelijk hierboven zijn al stijl en kleur opgegeven, hier wordt alleen de breedte van de border nog opgegeven.

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 1px 0 1px 0 in de volgorde boven – rechts – onder – links. Boven en onder een border van 1 px breed, links en rechts geen border.

#vier

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div {background: white; color: black; width: 600px; max-width: 98vw; text-align: center; margin: 10px auto; border: black solid 1px;}

Het element met id="vier". De <div> waar het vierde voorbeeld in zit.

line-height: 4em;

Regelhoogte.

Binnen deze <div> staan drie <p>'s, elk met een regel tekst. Deze drie <p>'s erven elk deze regelhoogte van 4 em. Samen is dat 12 em. Een <div> is een blok-element en wordt daarom normaal genomen precies hoog genoeg om de inhoud ervan weer te kunnen geven. Daarom is 12 em ook de hoogte van de <div>.

Drie gelijk verdeelde regels tekst

Elke <p> heeft een regelhoogte van 4 em. Op de afbeelding hebben de drie <p>'s een achterkleur en een randje gekregen, zodat ze te zien zijn. Omdat tekst altijd halverwege de regelhoogte wordt neergezet, staat elke regel tekst verticaal gecentreerd binnen z'n eigen <p>. En omdat de drie <p>'s even hoog zijn, staan de drie regels tekst netjes verticaal verdeeld binnen div#vier.

Als de tekst niet meer op één regel past, bijvoorbeeld omdat de lettergrootte is verhoogd, komt de niet passende tekst op een nieuwe regel te staan. Die ook weer een regelhoogte van 4 em heeft. Daardoor wordt de <p> met die niet passende tekst nu plotsklaps 8 em hoog. Waardoor div#vier nu geen 12 em, maar 16 em hoog wordt. Dit kan de lay-out van de pagina fors verstoren. Bij Achterliggend idee is hiervan een afbeelding te zien.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij gebruik van een absolute eenheid zoals px de regelhoogte niet in alle browsers mee verandert met de lettergrootte. Zoomen kan wel altijd, ongeacht welke eenheid voor de regelhoogte wordt gebruikt.

.rand

Alle elementen met class="rand". Dit zijn de eerste en de derde <p> binnen div#vier.

background: #9ff;

Blauwe achtergrondkleur.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

margin: 0;

Een <p> heeft standaard een marge aan boven- en onderkant. Die wordt hier weggehaald.

#midden

Het element met id="midden". De middelste <p> van het vierde voorbeeld.

background: #9f3;

Groene achtergrondkleur. De bovenste en onderste <p> in div#vier hebben een blauwe achtergrondkleur, zodat de grootte van de <p>'s te zien is.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

margin: 0;

Een <p> heeft standaard een marge aan boven- en onderkant. Die wordt hier weggehaald.

border: dotted black;

Gestippeld randje. Mensen die moeite hebben met kleuren, kunnen nu ook de grootte van de <p> zien. Gelijk hieronder wordt de breedte van de border opgegeven.

border-width: 1px 0;

Gelijk hierboven zijn al stijl en kleur van de border opgegeven, hier wordt alleen de breedte nog opgegeven.

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 1px 0 1px 0 in de volgorde boven – rechts – onder – links. Boven en onder een border van 1 px breed, links en rechts geen border.

#vijf

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div {background: white; color: black; width: 600px; max-width: 98vw; text-align: center; margin: 10px auto; border: black solid 1px;}

Het element met id="vijf". De <div> waar het vijfde voorbeeld in zit.

line-height: 3em;

Regelhoogte.

Binnen deze <div> staat slechts één <span>. De <span> erft deze regelhoogte van 3 em. Om vier regels tekst te krijgen, staan er drie <br>'s in de <span>. Omdat de <span> is verdeeld over vier regels, is de <span> in totaal 12 em hoog.

Een <div> is een blok-element en dat wordt normaal genomen precies hoog genoeg om de inhoud ervan weer te kunnen geven. Daarom is 12 em ook de hoogte van de <div>.

De <span> is met behulp van <br>'s in vier verschillende delen gesplitst. Als de tekst binnen een deel niet meer op één regel past, bijvoorbeeld omdat de lettergrootte is verhoogd, komt de niet passende tekst van dat deel op een nieuwe regel te staan. Die ook weer een regelhoogte van 3 em heeft. Daardoor is de <span> nu 15 em hoog. Waardoor ook de <div> nu niet meer 12 em, maar 15 em hoog wordt. Dit kan de lay-out van de pagina fors verstoren. Bij Achterliggend idee is hiervan een afbeelding te zien.

#vijf span, #zes span

Alle <span>'s in de elementen met id="vijf" en id="zes". In div#vijf zit één <span>, die met behulp van <br>'s in vier delen is gesplitst met elk een regel tekst. In div#zes zitten vier <span>'s met in elke <span> een regel tekst.

background: #9f3;

Groene achtergrondkleur, zodat de grootte van de <span>'s is te zien.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, wordt deze toch specifiek opgegeven. Hierboven is een achtergrondkleur opgegeven. Sommige mensen hebben zelf de voorgrond‑ en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als nu de achtergrondkleur wordt veranderd, maar niet de voorgrondkleur, loop je het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, is redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt in een eigen stylesheet, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Dit is ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin, als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

border: dotted black 1px;

Zwarte gestippelde rand. Ook mensen die moeite met kleuren hebben, kunnen nu de grootte van de <span>'s zien.

-webkit-box-decoration-break: clone; box-decoration-break: clone;

Hier staat in feite twee keer hetzelfde: box-decoration-break: clone;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms- en -webkit-.

border met en zonder text-decoration-break

Op de afbeelding is de gestippelde border vervangen door een gewone lijn, omdat dit duidelijker is. Een <span> is een inline-element. Als een inline-element een border krijgt, wordt die normaal genomen alleen aan de boven- en onderkant neergezet, en helemaal aan het begin en eind van het element. Dat is te zien op de rechterafbeelding.

Met behulp van deze eigenschap wordt de border ook links en rechts overal neergezet, zoals op de linkerafbeelding is te zien.

Internet Explorer, Edge en oudere versies van UC browser en Opera Mini op Android ondersteunen deze eigenschap niet en tonen de borders dus zoals op de rechterafbeelding.

padding: 0 2px;

Omdat voor onder en links geen waarde is ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 2px 0 2px in de volgorde boven – rechts – onder – links.

Aan de boven- en onderkant is genoeg ruimte tussen de border en de tekst, maar links en rechts niet. Daarom wordt links en rechts een kleine padding gegeven.

Een padding bij een inline-element wordt normaal genomen op dezelfde manier weergegeven als een border: alleen aan boven- en onderkant, en helemaal aan begin en eind. Hier wordt de padding echter ook links en rechts overal getoond. Iets hierboven bij box-decoration-break wordt dit uitgebreider beschreven voor de border. Bij de padding werkt dit op precies dezelfde manier.

#zes

Voor dit element is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

div {background: white; color: black; width: 600px; max-width: 98vw; text-align: center; margin: 10px auto; border: black solid 1px;}

Het element met id="zes". De <div> waar het zesde voorbeeld in zit.

display: flex;

Met behulp van deze eigenschap wordt van div#zes een zogenaamde 'flex container' gemaakt. Het is onderdeel van flexbox, een verzameling eigenschappen die het makkelijker maken de pagina op een bepaalde manier in te delen.

De directe kinderen van een flex container zijn 'flex items'. In dit geval zijn die kinderen de vier <span>'s in de <div>.

Alleen de directe kinderen van een flex container zijn flex items:

<div id="zes"> <span></span> </div>

Bovenstaande <span> is een direct kind van div#zes.

<div id="zes"> <p> <span></span> </p> </div>

Deze <span> is geen direct kind van div#zes, omdat er een <p> tussen de <div> en de <span> zit.

Met behulp van flexbox kunnen flex items op allerlei manieren worden verdeeld binnen de flex container.

Flex items gedragen zich zelf weer als een normaal element voor wat betreft hun eigen nakomelingen. Als je binnen de <span> bijvoorbeeld een <img> zou zetten, gedraagt die <img> zich op precies dezelfde manier als bij een 'gewone' <span>.

Verschil tussen gewonen spans en spans als flex items

Voor de flex items zelf, hier de vier <span>'s, ligt het iets anders. Als je display: flex; weghaalt, gedragen de <span>'s zich als gewone <span>'s. Op de bovenste afbeelding is dit te zien: de groene <span>'s zijn gewone inline-elementen. De tekst in de <span>'s wordt op één regel gezet, voor zover dat past. (Dat de tekst horizontaal gecentreerd staat, komt omdat bij div text-align: center; is opgegeven.)

Op de onderste afbeelding is van div#zes met display: flex; weer een flex container gemaakt, en zijn de vier groene <span>'s dus veranderd in flex items. Nu blijkt elke <span> even breed te worden als z'n ouder. Bovendien staan de <span>'s, en daarmee ook de erin zittende tekst, nu verticaal gecentreerd binnen de witte <div>. Dat verticaal centreren komt door de iets hieronder gebruikte eigenschap justify-content: space-around;, ook een onderdeel van flexbox.

flex-direction: column;

Met deze eigenschap wordt de richting van de hoofdas (in het Engels: 'main axis') aangegeven. Standaard heeft flex-direction de waarde 'row': horizontaal, waardoor de flex items naast elkaar komen te staan: op één regel. Hier moeten de flex items niet naast, maar onder elkaar komen te staan, in een kolom.

De gebruikte sleutelwoorden 'row' en 'column' zijn in het begin wat verwarrend, omdat de flex items (hier vier <span>'s) juist andersom worden weergegeven. Als je hier 'column' gebruikt, worden de <span>'s als een regel, als 'row', onder elkaar gezet.

Maar flex-direction heeft geen betrekking op de flex items, maar op de flex container, hier div#drie. 'column' verandert de flex container in een kolom.

flex-direction row zet de vier spans naast elkaar

Bij een aantal eigenschappen is de richting van de hoofdas van belang. Omdat deze hier verticaal is (de flex container is een kolom), is de richting van bijvoorbeeld justify-content ook verticaal en komt lege ruimte boven en onder de flex items te staan. Zou hier flex-direction: row; hebben gestaan, dan zou de flex container een regel zijn en zou justify-content lege ruimte links en rechts van de flex items neerzetten. Dat is wat op de afbeelding gebeurt: de flex items, de vier <span>'s, staan keurig verdeeld, maar wel in de verkeerde richting.

Het is even wennen, maar juist dit soort dingen maakt flexbox zo flexibel.

justify-content: space-around; Vier gelijk verdeelde regelst tekst

Verdeel de flex items gelijkmatig binnen de <div>. Omdat hierboven flex-direction: column; is gebruikt, gaat het om de ruimte boven en onder de flex items. Bij de waarde space-around wordt ook aan de bovenkant van het bovenste en aan de onderkant van het onderste flex item ruimte overgelaten, maar half zoveel als tussen twee flex items.

Omdat de <span>'s netjes zijn verdeeld, is ook de in de <span>'s zittende tekst netjes verdeeld. Als de tekst in 'n <span> te lang is om op één regel te passen, wordt het teveel op een nieuwe regel gezet. Maar omdat geen regelhoogte is gebruikt, komt die nieuwe regel gelijk onder de eerste regel te staan. De <span>'s staan nog steeds netjes verdeeld en de <div> wordt hierdoor ook niet groter. Meer hierover is te vinden bij Achterliggend idee.

Waar je nog niet zo lang geleden soms de meest ingewikkelde dingen moest uithalen om iets netjes te verdelen, volstaan nu deze paar regels. Die bovendien geen bijwerkingen hebben op het gebied van toegankelijkheid en dergelijke.

height: 12em;

Hoogte.

Als eenheid wordt de relatieve eenheid em gebruikt, omdat bij een absolute eenheid als px de hoogte van de <div> niet mee verandert met de lettergrootte.

Het is wat riskant een vaste hoogte te gebruiken bij een blok-element. Als de inhoud van de <div> hoger wordt dan 12 em, bijvoorbeeld door een grotere letter, groeit de <div> niet mee met de inhoud. Daarom kun je veel beter min-height gebruiken. Daarbij groeit de <div> mee, als de inhoud te hoog wordt.

Internet Explorer 11 heeft echter een vreemde bug, waardoor min-height niet goed werkt in combinatie met flexbox. In dit voorbeeld levert een vaste hoogte geen problemen op, maar soms kan dat wel problemen opleveren. Meer over deze bug en een oplossing is te vinden bij Bekende problemen (en oplossingen).

#zes span

Voor deze elementen is eerder css opgegeven. Deze wordt binnen dit blokje herhaald in de volgorde, waarin deze in de stylesheet staat, zodat alles hier overzichtelijk bij elkaar staat.

#vijf span, #zes span {background: #9f3; color: black; border: dotted black 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px;}

Alle <span>'s in het element met id="zes". Dit zijn de vier <span>'s van het vierde voorbeeld.

border-width: 1px 0;

Eerder is bij #vijf span, #zes span aan alle kanten een border opgegeven. Omdat deze <span>'s even breed zijn als div#zes, zijn de borders aan de zijkant hier lelijk. Daarom worden ze hier weggehaald.

Omdat voor onder en links geen waarde is opgegeven, krijgen die dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 1px 0 1px 0 in de volgorde boven – rechts – onder – links. Boven en onder een border, links en rechts geen border.