Websites met stijl

Naslag: Blok en inline

Er zijn blok-elementen, inline-elementen, en inline-blok elementen. Ze verschillen in de ruimte die ze innemen.

Blok-elementen heten voluit elementen op blok-niveau (engels: block-level elements).

Een blok-element begint op een nieuwe regel.
Een blok-element kent de eigenschappen width (breedte) en height (hoogte):
- Als geen width is opgegeven neemt een blok-element de hele beschikbare breedte in beslag.
- Als geen height is opgegeven bepaalt de inhoud (bijvoorbeeld de hoeveelheid tekst) de hoogte.
Er kan niet meer dan één blok-element op een regel.

Dit is een blok element.

De hoogte van een element kan worden ingesteld met de eigenschap height.
Met de eigenschap width kan een blok-element smaller gemaakt worden dan de beschikbare breedte, maar dan kan er nog steeds geen ander element voor of achter staan.

Blok element met een width van 50%. Er kan geen ander element voor of achter een blok-element komen te staan, ook al is er nog plaats.

Div, p, h1, nav, header zijn voorbeelden van blok-elementen.

Een inline element begint niet op een nieuwe regel
Een inline element neemt zoveel ruimte in als nodig is voor de inhoud.
De inhoud bepaalt de breedte en hoogte. Breedte en hoogte kunnen dus niet worden ingesteld.
Er kunnen als er plaats is verschillende inline-elementen op een regel staan.

Dit is een inline-element Dit is ook een inline-element

Span en a zijn voorbeelden van inline-elementen.

Een inline-blok element is een inline element dat de eigenschappen breedte en hoogte kent.

Een inline-blok element begint niet op een nieuwe regel.
Er kunnen als er plaats is verschillende inline-blok elementen op een regel staan.
Een inline-element kent de eigenschappen hoogte en breedte.

Een inline-blok element Een inline-blok element met een andere hoogte.

Img is een inline-blok-element.

Verder kan een element tot een inline-blok element worden getransformeerd met de eigenschap display: inline‑block;