¿El elemento <img> está a nivel de bloque o en línea?
Leí en alguna parte que ese <img>elemento se comporta como ambos. Si es correcto, ¿podría alguien explicarlo con ejemplos?
Es cierto, son ambas cosas o, más precisamente, son elementos de "bloque en línea". Esto significa que fluyen en línea como el texto, pero también tienen un ancho y un alto como elementos de bloque.
En CSS, puede configurar un elemento para display: inline-blockque replique 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 es esencialmente reemplazado por datos binarios.
* Tenga en cuenta que técnicamente los navegadores utilizan display: inline(como se ve en las herramientas de desarrollador) pero le están dando un tratamiento especial a las imágenes. Todavía siguen todos los rasgos de inline-block.
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 imglos elementos.
p.ej
Generalización: "El ancho no se aplica a los elementos en línea"
Lo que realmente dice la especificación : "Se aplica a: todos los elementos excepto los elementos en línea, filas de tabla y grupos de filas no reemplazados"
Dado que una imagen es un elemento en línea reemplazado, se aplica.
Los elementos IMG están en línea, lo que significa que, a menos que floten, fluirán horizontalmente con el texto y otros elementos en línea.
Son elementos de "bloque" porque tienen un ancho y un alto. Pero se comportan más como "bloques en línea" a ese respecto.
