2012-03-29 13 views
5

¿Por qué el estilo de visualización predeterminado para la imagen es en línea en lugar de en línea?¿Por qué el uso de imágenes muestra: en línea pero se comporta como un elemento de bloque en línea

¿Hay alguna diferencia entre los bloques en línea y en línea para img, de lo que puedo ver se comporta exactamente de la misma manera.

+0

Ha comprobado este enlace? Puede ayudarle [http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element][1] [1]: http://stackoverflow.com/questions/2402761/img-elements-block-level-element-or-inline-element – NewUser

+0

razones históricas? ¿compatibilidad con versiones anteriores? quién sabe .. – Aprillion

Respuesta

1

El bloque en línea le permite manipular la apariencia del objeto con el estilo del modelo de caja (por ejemplo, darle las dimensiones), pero le permite mantener el objeto alineado en línea, como el texto.

+0

Sé cuál es la diferencia entre el bloque en línea y en línea. La pregunta es por qué los elementos de la imagen se comportan de la misma manera al configurarlo en línea si hay una diferencia. En mi configuración lógica, el ancho y el alto no funcionarían si fuera pantalla: en línea – jontro

+0

interesante. lea esto: http://reference.sitepoint.com/css/replacedelements – Rodik

+0

Agradable lectura, esto le da más información. Todavía soy curioso acerca de más información sobre el tema. – jontro

1

El bloque en línea es el mismo que en línea, excepto que le permite ajustar las propiedades del bloque, como el margen y el margen. Por defecto, se supone que las imágenes fluyen semánticamente con texto como un diagrama en un artículo de noticias, por eso todos los atributos originales tienen que ver con alinear la imagen con el flujo de texto.

Inline-block es una declaración de CSS2 más reciente y not fully implemented in IE 6/7.

+0

La pregunta realmente se relaciona con el modo realmente estricto/html5. Todavía puedo establecer los márgenes aunque la imagen esté por defecto en línea – jontro

+0

Su primera frase no es del todo precisa. Los márgenes y el relleno son aplicables tanto a elementos en línea como a elementos de bloque en línea, pero se presentan de una manera diferente con respecto a sus hermanos y padres. – BoltClock

6

IMG es un Inline & Sustituido elemento.

Un elemento reemplazado es cualquier elemento cuyo aspecto y dimensiones son definidos por un recurso externo.

Según W3C

El IMG elemento no tiene contenido; generalmente es replaced inline por la imagen designada por el atributo src, con la excepción de las imágenes de la izquierda o alineadas a la derecha que están "flotantes" fuera de línea.

Comprobar este enlace para hojas de estilo del navegador más http://reference.sitepoint.com/css/replacedelements

3

La primera parte de su pregunta ya está contestada, por lo que no voy a repetir.

Para la segunda parte, algunos navegadores como Firefox representan una etiqueta sin imágenes img como un intervalo, incluso cuando los atributos de ancho y alto se especifican en CSS.

Puede probarlo usted mismo con este código HTML:

<img alt='no image' src='about:blank'><br> 
<img alt='no image' src='about:blank'id=iblock> 

Y correspondiente CSS:

img { 
    height: 100px; 
    width: 100px; 
    background: cyan; 
} 
#iblock { 
    display: inline-block; 
} 

O ver la diferencia en la prestación de efecto con esta demostración en JsFiddle.

+0

¡Interesante hallazgo! – jontro

Cuestiones relacionadas