De eenvoudigste manier om het gedrag van je CSS layouts te begrijpen, is om de elementen onder te verdelen in block-level en inline. Dit zijn twee belangrijke eigenschappen die HTML-elementen in twee groepen verdelen. Elementen zijn namelijk of inline of block-level. Als je weet wat de specifieke eigenschappen zijn van beide, zal je veel van wat je ziet gebeuren op het beeldscherm kunnen verklaren. Vervolgens is de oplossing meestal gauw gevonden.
Het belangrijkste verschil is dat een block-level element altijd de volledige breedte gebruikt en geen andere elementen naast zich duldt. Een inline element staat samen met andere inline elementen naast elkaar op een regel, zoals bijvoorbeeld tekst. Inline wordt ook wel text-level genoemd. Verder vormt een block-level element een (rechthoekig) blok.Dat doet een inline element niet, dat past zich aan de afmeting van de inhoud aan. Hier volgt een opsomming van de eigenschappen van inline en block-level elementen.
Block-level
- Gebruikt de volledige breedte van het parentelement
- Vormt een rechthoek
- De inhoud van een block-level element kan bestaan uit inline en block-level elementen en uit tekst.
- Tekstelementen zijn block-level elementen. Denk aan koppen en alinea’s, deze staan van zichzelf al onder elkaar. (let op dat deze geen andere block-level elementen kunnen insluiten!)
- Andere voorbeelden van block-level elementen zijn div, table, ul, ol en li.
- Door een block-level element een breedte te geven pas je de zichtbare breedte aan. Dit betekent echter niet dat andere elementen de vrij gekomen ruimte kunnen innemen. Het blijft het enige element op de regel.
Inline
- Inline elementen staan naast elkaar op een regel
- De afmeting en vorm van een inline element wordt bepaald door de inhoud.
- De inhoud van inline elementen kan bestaan uit tekst en uit andere inline elementen zoals img, span, strong, em en a.
- In een inline element kunnen geen block-level elementen staan.
- Er mogen nooit inline elementen los in de body staan, deze horen ingesloten in een block-level element.
- Je zult tevergeefs een width, height, margin-top en margin-bottom aan een inline element geven.
Inline-block
Er is ook nog een tussenvorm waarbij een element zowel inline als block-level eigenschappen heeft. Voorbeelden hiervan zijn afbeeldingen en block-level elementen waaraan Block Formatting Context is toegevoegd zoals bijvoorbeeld float.
Meer weten?
No related posts.