¿Es el elemento <img> bloque de nivel o nivel en línea?

163

He leído en alguna parte que ese <img>elemento se comporta como ambos. Si es correcto, ¿alguien podría explicarlo con ejemplos?

html css image falta de comprensión
fuente

Respuestas:

189

Es cierto, son ambos, o más precisamente, son elementos de "bloque en línea". Esto significa que fluyen en línea como texto, pero también tienen un ancho y una altura como elementos de bloque.

En CSS, puede establecer un elemento para display: inline-blockque reproduzca el comportamiento de las imágenes *.

Las imágenes y los objetos también se conocen como elementos "reemplazados", ya que no tienen contenido per se, el elemento se reemplaza esencialmente por datos binarios.

* Tenga en cuenta que los navegadores utilizan técnicamente display: inline(como se ve en las herramientas de desarrollador) pero están dando un tratamiento especial a las imágenes. Todavía siguen todos los rasgos de inline-block.

Cabra descontento
fuente
Siempre leo que las imágenes son elementos en línea, no bloques en línea, pero tiene sentido que sean bloques en línea, debido a la capacidad de agregar ancho y alto.
Donato
22
Esta respuesta no es técnicamente correcta. Precisamente hablando, los imgelementos no son inline-blocksino inlineelementos. Puede verificar esto en un navegador moderno haciendo clic derecho en una imagen, haciendo clic en "Inspeccionar elemento", luego visualizando el estilo calculado, que se mostrará display: inline. No hay contexto de bloque dentro de la etiqueta, por lo que no es correcto llamarlo inline-block. Para obtener más información sobre los elementos en línea reemplazados, consulte la respuesta de Quentin y este artículo de MDN .
Maximillian Laumeister
@Max ese enlace no dice nada sobre los elementos reemplazados que están en línea.
DisgruntledGoat
@DisgruntledGoat El enlace que publiqué no dice que los imgelementos estén en línea: las herramientas de desarrollo de Google Chrome muestran los imgelementos como en línea. Esta publicación es el único lugar que he encontrado hasta ahora que dice que están en su inline-blocklugar. Curiosamente, tampoco he encontrado ninguna autoridad que diga que lo son inline. ¿Cómo tratar la etiqueta depende de la implementación, tal vez?
Maximillian Laumeister
2
@Max De acuerdo con esto , los elementos reemplazados están fuera del alcance del modelo de formato CSS. Nada en las especificaciones HTML o CSS especifica que las imágenes estén en línea. Entonces, independientemente de lo que diga el navegador, las imágenes se tratan exactamente como se configuraron display:inline-block.
DisgruntledGoat
53

Un imgelemento es un elemento en línea reemplazado .

Se comporta como un elemento en línea (porque lo es), pero algunas generalizaciones sobre elementos en línea no se aplican a los imgelementos.

p.ej

Generalización: "El ancho no se aplica a los elementos en línea"

Lo que en realidad dice la especificación : "Se aplica a: todos los elementos excepto elementos en línea no reemplazados, filas de tabla y grupos de filas"

Como una imagen es un elemento en línea reemplazado, se aplica.

Quentin
fuente
13

Los elementos IMG están en línea, lo que significa que, a menos que sean flotantes, fluirán horizontalmente con texto y otros elementos en línea.

Son elementos de "bloque" en el sentido de que tienen un ancho y un alto. Pero se comportan más como "bloque en línea" en ese sentido.

Robusto
fuente
7

Para casi todos los propósitos, piense en ellos como un elemento en línea con un conjunto de ancho. Básicamente, usted es libre de dictar cómo desea que se muestren las imágenes usando CSS. Generalmente establezco algunas clases de imágenes de esta manera:

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
fuente
2

Cada vez que inserta una imagen, solo toma el ancho que originalmente tenía la imagen. Puede agregar cualquier otro elemento html junto a él y verá que lo permitirá. Eso hace que la imagen sea un elemento "en línea".

Avatar
fuente
0

Es cierto, son ambos, o más precisamente, son elementos de "bloque en línea". Esto significa que fluyen en línea como texto, pero también tienen un ancho y una altura como elementos de bloque.

Modaser Sadat
fuente