¿Es el nivel de bloque de elementos o el nivel en línea?
He leído en alguna parte que el elemento <img> se comporta como ambos. Si es correcto, ¿podría alguien explicarlo con ejemplos?
5 answers
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 un alto como elementos de bloque.
En CSS, puede establecer un elemento en 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 es esencialmente reemplazado por datos binarios.
* Tenga en cuenta que los navegadores técnicamente utilizan display: inline (como se ve en las herramientas para desarrolladores) pero están dando un tratamiento especial a las imágenes. Todavía siguen todos los rasgos de inline-block.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-12-30 02:38:12
Un elemento img es un replaced inline element.
Se comporta como un elemento inline (porque lo es), pero algunas generalizaciones sobre los elementos inline no se aplican a los elementos img.
Por ejemplo
Generalización:"El ancho no se aplica a los elementos en línea"
Lo que la especificación realmente dice: "Se aplica a: todos los elementos, excepto los elementos en línea no reemplazados, filas de tabla y grupos de filas "
Dado que una imagen es un elemento inline reemplazado, sí se aplica.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-08 16:22:42
Los elementos IMG están en línea, lo que significa que, a menos que estén flotando, 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.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-08 16:22:01
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 le gustaría que se muestren las imágenes usando CSS. Generalmente establezco algunas clases de imagen como 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;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-03-08 17:10:25
Cada vez que inserta una imagen, solo toma el ancho que la imagen tiene originalmente. Puedes añadir cualquier otro elemento html junto a él y verás que lo permitirá. Eso hace de la imagen un elemento "en línea".
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-04-04 09:58:59