html - linea - ¿El elemento<img> está bloqueado a nivel o en línea?

etiquetas html

Question

He leído en alguna parte que el elemento <img> se comporta como los dos. Si es correcto, ¿podría alguien explicar con ejemplos?

Answer 1

Cada vez que insertas una imagen, simplemente toma el ancho que tiene originalmente la imagen. Puede agregar cualquier otro elemento html al lado y verá que lo permitirá. Eso hace que la imagen sea un elemento "en línea".

Answer 2

Es cierto, ambos son, 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-block para que 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 se reemplaza esencialmente por datos binarios.

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

Answer 3

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

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

Answer 4

Para casi todos los propósitos, considérelos como un elemento en línea con un ancho establecido. Básicamente, usted es libre de dictar cómo desea que las imágenes se muestren mediante CSS. Por lo general, configuré unas pocas clases de imágenes así:

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

Answer 5

Un elemento img es un replaced inline element .

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

p.ej

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

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

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