Block, Inline en Inline-Block Elementen in HTML

In dit hoofdstuk van de HTML-cursus gaan we dieper in op HTML-elementen en hun weergavetypes: block, inline en inline-block. Deze eigenschappen bepalen hoe elementen op de webpagina worden gerangschikt en met elkaar interageren.

1. Block elementen

Block elementen zijn de bouwstenen van elke webpagina. Ze nemen standaard de volledige beschikbare breedte in, ongeacht hun inhoudelijke breedte. Hierdoor begint elk block element op een nieuwe lijn en creëert het een "blok" op de pagina. Voorbeelden van block elementen zijn <div>, <p>, <h1> tot <h6>, en <ul>.

Nemen de volledige breedte van hun ouder element in.
Beginnen altijd op een nieuwe regel.
Hoogte en breedte zijn instelbaar.
Margin en padding worden toegepast aan alle zijden.

block element

2. Inline elementen

In tegenstelling tot block elementen, nemen inline elementen alleen de breedte in die hun inhoud nodig heeft. Ze breken de regel niet en kunnen naast andere elementen op dezelfde regel staan. Voorbeelden van inline elementen zijn <span>, <a>, <strong>, <em>.

Nemen alleen de breedte van hun inhoud in.
Blijven op dezelfde regel als hun omliggende content.
Hoogte en breedte kunnen niet geforceerd worden.
Margin en padding worden enkel horizontaal toegepast; verticale margin en padding zijn niet effectief.

Voorbeeld van een inline element, blijven op dezelfde regel.

3. Inline-Block elementen

Inline-block elementen combineren kenmerken van zowel inline als block elementen. Ze nemen alleen de breedte in die nodig is voor hun inhoud, maar staan wel het instellen van breedte en hoogte toe. Een voorbeeld van een inline-block element is <button>.

Nemen de ruimte in die nodig is voor hun inhoud, zonder de volledige breedte van hun ouder element in te nemen.
Kunnen naast andere elementen staan op dezelfde regel.
Breedte en hoogte zijn aanpasbaar, wat meer controle geeft over de vormgeving.
Behouden de eigenschappen van zowel inline als block elementen.
Zijn volledig klikbaar, wat hen ideaal maakt voor interactieve elementen zoals knoppen en aangepaste links.

inline-block element

Door deze eigenschappen zijn inline-block elementen bijzonder veelzijdig en nuttig voor webdesign, omdat ze de mogelijkheid bieden om elementen nauwkeurig te positioneren en te stijlen, terwijl ze interactief en functioneel blijven.

Terug naar boven