Ik heb ergens gelezen dat het <img>-element zich als beide gedraagt. Indien correct, kan iemand dit dan uitleggen met voorbeelden?
Antwoord 1, autoriteit 100%
Het is waar, het zijn beide – of beter gezegd, het zijn “inline block”-elementen. Dit betekent dat ze inline vloeien zoals tekst, maar ook een breedte en hoogte hebben zoals blokelementen.
In CSS kun je een element instellen op display: inline-blockom het gedrag van afbeeldingen* te laten repliceren.
Afbeeldingen en objecten worden ook wel “vervangen” elementen genoemd, aangezien ze op zich geen inhoud hebben, wordt het element in wezen vervangen door binaire gegevens.
* Houd er rekening mee dat browsers technisch gezien display: inlinegebruiken (zoals te zien is in de ontwikkelaarstools), maar ze geven een speciale behandeling aan afbeeldingen. Ze volgen nog steeds alle eigenschappen van inline-block.
Antwoord 2, autoriteit 29%
Een imgelement is een vervangen inline element.
Het gedraagt zich als een inline-element (omdat het dat is), maar sommige generalisaties over inline-elementen zijn niet van toepassing op img-elementen.
bijv.
Generalisatie: “Breedte is niet van toepassing op inline-elementen”
Wat de specificatie eigenlijk zegt: “Van toepassing to: alle elementen behalve niet-vervangen inline-elementen, tabelrijen en rijgroepen “
Aangezien een afbeelding een vervangen inline-element is, is deze wel van toepassing.
Antwoord 3, autoriteit 7%
IMG-elementen zijn inline, wat betekent dat, tenzij ze zwevend zijn, ze horizontaal samenvloeien met tekst en andere inline-elementen.
Het zijn “blok”-elementen in die zin dat ze een breedte en een hoogte hebben. Maar in dat opzicht gedragen ze zich meer als “inline-block”.
Antwoord 4, autoriteit 3%
Beschouw ze voor bijna alle doeleinden als een inline-element met een breedte-set. In principe bent u vrij om te dicteren hoe u wilt dat afbeeldingen worden weergegeven met behulp van CSS. Ik stel over het algemeen een paar beeldklassen als volgt in:
img.center {display:block;margin:0 auto;}
img.left {float:left;margin-right:10px;}
img.right {float:right;margin-left:10px;}
img.border {border:1px solid #333;}
Antwoord 5
Telkens wanneer u een afbeelding invoegt, neemt deze gewoon de breedte in die de afbeelding oorspronkelijk heeft. Je kunt elk ander html-element ernaast toevoegen en je zult zien dat het dit zal toestaan. Dat maakt afbeelding een “inline” element.
Antwoord 6
Het is waar, het zijn beide – of beter gezegd, het zijn “inline block”-elementen. Dit betekent dat ze inline vloeien zoals tekst, maar ook een breedte en hoogte hebben zoals blokelementen.
Antwoord 7
<img>is een vervangen element; het heeft standaard de weergavewaarde inline, maar de standaardafmetingen worden gedefinieerd door de intrinsieke waarden van de ingesloten afbeelding, alsof het inline-blok was. U kunt eigenschappen instellen zoals rand/grensradius, opvulling/marge, breedte, hoogte, enz. op een afbeelding.
Vervangen elementen: dit zijn elementen waarvan de inhoud niet wordt beïnvloed door de stijlen van het huidige document. De positie van het vervangen element kan worden beïnvloed met CSS, maar niet de inhoud van het vervangen element zelf.
Referentie: https://developer.mozilla.org /nl-NL/docs/Web/HTML/Element/img
Antwoord 8
De wordt beschouwd als een inline-element omdat het andere elementen, inclusief zichzelf, op dezelfde regel laat zitten.
Het kan ook enkele blokkenmerken hebben, zoals de styling van de breedte en hoogte.
Maar je kunt het veranderen door de display-eigenschap van het element in CSS in te stellen op ‘inline-block’.
Dat is:
img {display:inline-block;}
Antwoord 9
gedraagt zich als een inline-blockelement omdat het andere afbeeldingen in dezelfde regel toestaat, d.w.z. inline en ook kunnen we de breedte en hoogte van de afbeelding wijzigen en dit is de eigenschap van een blokelement.
Bied daarom zowel de kenmerken van inline- als block-elementen.
Antwoord 10
is een inline element ..maar in css kun je het eenvoudig veranderen door:-
img{display:inline-blok;}
of
img{display:inline-blok;}
of
img{display:inliblock;}