Una respuesta visual

Imagine un elemento dentro de un

. Si le das al elemento una altura de 100 px y un borde rojo, por ejemplo, se verá así con

pantalla: en línea

pantalla: bloque en línea

locking de pantalla

Código: http://jsfiddle.net/Mta2b/

Elementos con display:inline-block son como display:inline elementos en display:inline , pero pueden tener ancho y alto . Eso significa que puede usar un elemento de bloque en línea como un bloque mientras fluye dentro del texto u otros elementos.

Diferencia de estilos admitidos como resumen:

• en línea : solo margin-left , margin-right , padding-left , padding-right
• bloque en línea : margin , padding , height , width

display: inline; es un modo de visualización para usar en una oración. Por ejemplo, si tiene un párrafo y desea resaltar una sola palabra, haga lo siguiente:

 
 Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  

El elemento tiene una display: inline; de forma predeterminada, porque esta etiqueta siempre se usa en una oración. El elemento

tiene una display: block; por defecto, porque no es ni una oración ni una oración, es un bloque de oraciones.

Un elemento con display: inline; no puede tener una height o un width o un margin vertical. Un elemento con display: block; puede tener un width , height y margin .
Si desea agregar una height al elemento , necesita configurar este elemento para display: inline-block; . Ahora puede agregar una height al elemento y a cualquier otro estilo de bloque (la parte de block del block en inline-block ), pero se coloca en una oración (la parte en inline-block ).

Una cosa que no se menciona en las respuestas es que el elemento en línea puede romperse entre líneas mientras que el bloque en línea no puede (y obviamente bloquea). Por lo tanto, los elementos en línea pueden ser útiles para diseñar oraciones de texto y bloques dentro de ellos, pero como no se pueden rellenar, puede usar línea de altura en su lugar.

 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  

Todas las respuestas anteriores aportan información importante sobre la pregunta original.

Sin embargo, hay una generalización que parece incorrecta.

Es posible establecer el ancho y alto al menos en un elemento en línea (puedo pensar).

Ambas respuestas aceptadas aquí y en este estado duplicado indican que esto no es posible, pero esto no parece ser una regla general válida.

¿Ejemplo?

  img { width: 200px; height: 200px; border= 1px solid red; }