Display-Eigenschap Block, Inline en Inline-Block

HTML-elementen gedragen zich verschillend, afhankelijk van of ze block, inline of inline-block zijn. Deze weergavetypen beïnvloeden de lay-out, de afstand en welke CSS-eigenschappen kunnen worden toegepast.

Block-elementen

• Beginnen op een nieuwe regel;
• Gebruiken de volledige breedte van hun container;
• Ondersteunen breedte, hoogte, marge, opvulling en rand.

Veelvoorkomende voorbeelden: <div>, <p>, <ul>, <li>, <h1>–<h6>.

Inline-elementen

• Blijven op dezelfde regel;
• Nemen alleen de ruimte in die nodig is voor hun inhoud;
• Kunnen geen breedte of hoogte krijgen (maar border werkt wel).

Veelvoorkomende voorbeelden: <a>, <span>, <img>, <input>.

Inline-block-elementen

• Blijven inline, zoals tekst;
• Ondersteunen breedte, hoogte, marge, opvulling en rand, zoals block-elementen.

Voorbeelden: <button>, <select>, <textarea>.

Ze zijn handig wanneer je wilt dat elementen naast elkaar staan, maar toch volledige controle over de opmaak wilt behouden.

Belangrijkste Verschillen