CSS weergave-eigenschappen: block, inline, en inline-block – en hoe je het verschil ziet
Web browsers behandelen elk element als een soort box. CSS kent echter twee verschillende soorten boxen – block en inline.
Een block element begint altijd op een nieuwe regel, en vult de horizontale ruimte links en rechts op de webpagina. Je kunt marges en padding toevoegen aan alle vier de zijden van een blok-element – boven, rechts, links en onder.
Een paar voorbeelden van blok-elementen zijn <div> en <p> tags. Zoals hieronder te zien is, heb ik ook groene padding toegevoegd aan alle vier de zijden van elk blok-element.
Inline-elementen
Inline-elementen beginnen niet op een nieuwe regel, ze staan op dezelfde regel als de inhoud en tags ernaast. Enkele voorbeelden van inline-elementen zijn <span><strong>, en <img> tags.
Wat marges en padding betreft, behandelen browsers inline-elementen anders. Je kunt links en rechts ruimte toevoegen aan een inline element, maar je kunt geen hoogte toevoegen aan de bovenste of onderste padding of marge van een inline element.
Inline elementen kunnen daadwerkelijk binnen blokelementen verschijnen, zoals hieronder te zien is. Ik heb witte padding toegevoegd aan de linker- en rechterkant van elk inline element.
Inline-blok
Inline-blok
Inline-blok
Inline-Block
Inline-block elementen zijn vergelijkbaar met inline elementen, behalve dat ze aan alle vier de zijden kunnen worden voorzien van padding en marges. U moet display: inline-block in uw CSS-code aangeven.
Een veelgebruikte toepassing van inline-block is het horizontaal maken van navigatie-links, zoals hieronder te zien is. Ik heb een horizontaal navigatiemenu gemaakt met een oranje achtergrondkleur.
Er zijn ook veel andere display-eigenschappen, die je via de MDN docs kunt bekijken.
-D.