L'elemento <img> è a livello di blocco o inline?

163

Ho letto da qualche parte che l' <img>elemento si comporta come entrambi. Se corretto, qualcuno potrebbe spiegare con esempi?

html css image

— understack
fonte

189

È vero, sono entrambi - o più precisamente, sono elementi "inline block". Ciò significa che scorrono in linea come il testo, ma hanno anche una larghezza e un'altezza come gli elementi del blocco.

In CSS, puoi impostare un elemento display: inline-blockper farlo replicare il comportamento delle immagini *.

Immagini e oggetti sono anche noti come elementi "sostituiti", poiché non hanno contenuto in sé, l'elemento viene sostanzialmente sostituito da dati binari.

* Nota che i browser utilizzano tecnicamente display: inline(come si vede negli strumenti per sviluppatori) ma stanno dando un trattamento speciale alle immagini. Seguono ancora tutti i tratti di inline-block.

— DisgruntledGoat
fonte

Ho sempre letto che le immagini sono elementi inline, non inline block, ma ha senso che sarebbero inline block, grazie alla possibilità di aggiungere larghezza e altezza.

— Donato,

22

Questa risposta non è tecnicamente corretta. Precisamente, gli imgelementi non sono inline-blockma in realtà inlineelementi. Puoi verificarlo in un browser moderno facendo clic con il pulsante destro del mouse su un'immagine, facendo clic su "Ispeziona elemento", quindi visualizzando lo stile calcolato, che verrà visualizzato display: inline. Non esiste alcun contesto di blocco all'interno del tag, quindi non è corretto chiamarlo inline-block. Per ulteriori informazioni sugli elementi incorporati sostituiti, consultare la risposta di Quentin e questo articolo MDN .

— Massimiliano Laumeister,

@Max quel link non dice nulla sugli elementi sostituiti in linea.

— DisgruntledGoat

@DisgruntledGoat Il link che ho pubblicato non dice che gli imgelementi sono in linea: gli strumenti di sviluppo di Google Chrome mostrano gli imgelementi come in linea. Questo post è l'unico posto che ho trovato finora che dice che sono inline-blockinvece. È interessante notare che non ho trovato alcuna autorità che dice che lo sono inline. Il trattamento dipende forse dall'implementazione del tag?

— Massimiliano Laumeister,

2

@Max In base a ciò , gli elementi sostituiti non rientrano nell'ambito del modello di formattazione CSS. Nulla nelle specifiche HTML o CSS specifica che le immagini siano in linea. Quindi, indipendentemente da ciò che dice il browser, le immagini vengono trattate esattamente come erano impostate display:inline-block.

— DisgruntledGoat

53

Un imgelemento è un elemento inline sostituito .

Si comporta come un elemento inline (perché lo è), ma alcune generalizzazioni sugli elementi inline non si applicano agli imgelementi.

per esempio

Generalizzazione: "La larghezza non si applica agli elementi incorporati"

Cosa dice effettivamente la specifica : "Si applica a: tutti gli elementi tranne gli elementi inline, le righe di tabella e i gruppi di righe non sostituiti"

Poiché un'immagine è un elemento incorporato sostituito, si applica.

— Quentin
fonte

13

Gli elementi IMG sono in linea, il che significa che, a meno che non vengano fluttuati, scorreranno orizzontalmente con testo e altri elementi in linea.

Sono elementi "a blocco" in quanto hanno una larghezza e un'altezza. Ma si comportano più come "blocco in linea" in questo senso.

— robusto
fonte

7

Per quasi tutti gli scopi pensali come un elemento inline con un set di larghezza. Fondamentalmente sei libero di dettare come desideri che le immagini vengano visualizzate usando i CSS. In genere imposto alcune classi di immagini in questo modo:

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;}

— Montana Flynn
fonte

2

Ogni volta che inserisci un'immagine ci vuole solo la larghezza che l'immagine ha originariamente. Puoi aggiungere qualsiasi altro elemento html accanto ad esso e vedrai che lo consentirà. Ciò rende l'immagine un elemento "inline".

— Avatar
fonte

0

È vero, sono entrambi - o più precisamente, sono elementi "inline block". Ciò significa che scorrono in linea come il testo, ma hanno anche una larghezza e un'altezza come gli elementi del blocco.

— Modaser Sadat
fonte