In CSS kan displaywaarden hebben van inlineen inline-block. Kan iemand in detail het verschil uitleggen tussen inlineen inline-block?
Ik heb overal gezocht, de meest gedetailleerde uitleg vertelt me dat inline-blockis geplaatst als inline, maar zich gedraagt als block. Maar het legt niet uit wat “gedraag je als een blok” precies betekent. Is het een speciale functie?
Een voorbeeld zou een nog beter antwoord zijn. Bedankt.
Antwoord 1, autoriteit 100%
Inline-elementen:
- respect links & rechtermarges en opvulling, maar niettop & onder
- kangeen breedte en hoogte instellen
- laat andere elementen links en rechts van hen zitten.
- zie zeer belangrijke kanttekeningen bij deze hier.
Blokkeer elementen:
- respecteer al die mensen
- forceer een regeleinde na het blokelement
- verkrijgt volledige breedte indien breedte niet gedefinieerd
Inline-blokelementen:
- laat andere elementen links en rechts van hen zitten
- respect top & ondermarges en opvulling
- hoogte en breedte respecteren
Van W3Schools:
Een inline-element heeft geen regeleinde ervoor of erna, en het tolereert HTML-elementen ernaast.
Een blokelement heeft wat witruimte erboven en eronder en tolereert geen HTML-elementen ernaast.
Een inline-block-element wordt geplaatst als een inline-element (op dezelfde regel als aangrenzende inhoud), maar gedraagt zich als een block-element.
Als je dit visualiseert, ziet het er als volgt uit:
De afbeelding is afkomstig van deze pagina, die ook wat meer over dit onderwerp vertelt.