<img> comportamiento de posicionamiento

Question

Parece que no puedo entender cómo las etiquetas img se comportan junto con el texto en una página html.

He eliminado los márgenes y el relleno, pero siempre parece haber algo de espacio extra debajo del img o algún otro comportamiento inesperado. Estoy seguro de que hay una solución CSS rápida usando posicionamiento absoluto o márgenes negativos, pero estoy buscando una solución más general.

Pregunta: ¿Alguien puede explicar cómo se colocan las etiquetas img, específicamente por qué se desplazan verticalmente cuando están junto al texto?

Answer 1

Si desea la <img> ser un elemento en línea, puede utilizar el atributo vertical-align CSS para especificar cómo la imagen se alinea con respecto a la línea de texto que aparece. This page tiene ejemplos recogidos en el "vertical- alinear en elementos en línea "partida.

Answer 2

Lo que ve debajo del img es el espacio necesario para la parte descendiente de un glifo como g o j. Una imagen se comporta como una letra y se sienta en la línea de base.

img 
{ 
    display: block; 
} 

Lo arreglaré para usted.

Un experiement que podría arrojar algo de luz:

<p style="font-size: 1em;">Lorem ipsum dolor <em style="font-size: 800%;">sit</em> amet.</p> 

pienso en la <em> como 128px alta imagen ~ (1 em si es 16px que es).

Answer 3

IMG elementos se colocan al igual que cualquier otro elemento en línea.

Answer 4

CSS tiene dos tipos de atributos display:: bloque y en línea.

Inline es como el texto. Fluye a lo largo, se envuelve al final de una caja, cosas así.

El bloque es grueso y tiene márgenes, relleno y ancho (ya sea calculado o derivado).

No tiene mucho sentido, pero <img> es en realidad un elemento en línea, junto con <a>, <abbr> y muchos otros. Lo que está sucediendo es que la imagen se está convirtiendo en algo equivalente a las letras, y no es 12pt de alto, pero tal vez 130px o lo que sea que tu imagen sea. Es por eso que se mantiene.

Declare <img style="display:block;" src="image.png" /> para que se comporte como la caja que la mayoría de la gente piensa que es.

Answer 5

Si desea un mayor control sobre el posicionamiento de su imagen, ajuste su imagen en un DIV y controle la posición del DIV. Puede flotar el div si desea entremezclarlo con su texto.

Answer 6

La clave para que su texto se ajuste alrededor de la imagen está fijando el atributo de flotación de este modo:

img { 
float:left; 
display:block; 
} 

Answer 7

esto podría no ser relevante en este caso particular (esperemos que el consejo de las respuestas anteriores debería resolver su problema), pero si descubre que obtiene un espacio adicional inesperado alrededor de los elementos, asegúrese de haber eliminado el relleno, los márgenes, etc. predeterminados.que los navegadores suelen añadir a los elementos (y, por supuesto, diferentes navegadores a menudo añaden diferentes cantidades de relleno, márgenes, etc.

Si haces márgenes seguro de que ha puesto a cero y el relleno, etc. mediante el uso de

body { margin: 0; padding: 0; border: 0; } 

en el inicio de su CSS, puede agregar cualquier relleno y márgenes, etc., sin tener que preocuparse de que los valores predeterminados del navegador causen espacios inesperados y, con suerte, menos incoherencias entre los navegadores.