¿Cuál es exactamente la diferencia entre los valores inliney inline-blockde CSS display?

Una respuesta visual

Imagina un <span>elemento dentro de a <div>. Si le da al <span>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

bloqueo de pantalla

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

Los elementos con display:inline-blockson como display:inlineelementos, pero pueden tener un ancho y una altura . Eso significa que puede usar un elemento de bloque en línea como bloque mientras lo fluye dentro del texto u otros elementos.

Diferencia de estilos admitidos como resumen:

• en línea : solamente margin-left, margin-right, padding-left,padding-right
• inline-block : 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, debe hacerlo:

<p>
    Pellentesque habitant morbi <em>tristique</em> senectus
    et netus et malesuada fames ac turpis egestas.
</p>

El <em>elemento tiene un display: inline;valor predeterminado, porque esta etiqueta siempre se usa en una oración. El <p>elemento tiene un display: block;valor predeterminado, 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 heighto una widtho una vertical margin. Un elemento con display: block; puede tener un width, heighty margin.
Si desea agregar heighta al <em>elemento, debe establecer este elemento en display: inline-block;. Ahora puede agregar heighta al elemento y a cualquier otro estilo de bloque (la blockparte de inline-block), pero se coloca en una oración (la inlineparte de 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 bloqueo 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 altura de línea .

<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  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.
</div>
<hr/>
<div style="width: 350px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <div style="display: inline-block; background: #F00; color: #FFF">
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  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.
</div>

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 la altura de al menos un elemento en línea (que se me ocurra): el <img>elemento.

Ambas respuestas aceptadas aquí y en este duplicado afirman 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;
}

<img src="#" />

El imgtiene display: inline, pero su widthy heightse establecieron con éxito.

La respuesta de splattne probablemente cubrió la mayor parte de todo, así que no repetiré lo mismo, pero: inliney inline-blockcomportarme de manera diferente con la directionpropiedad CSS.

Dentro del siguiente fragmento que ve one two(en orden) se representa, como lo hace en los diseños LTR. Sospecho que el navegador aquí detectó automáticamente la parte en inglés como texto LTR y la procesó de izquierda a derecha.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

Sin embargo, si sigo adelante y configuro displaya inline-block, el navegador parece respetar la directionpropiedad y renderiza los elementos de derecha a izquierda en orden, por lo que two onese representa.

body {
  text-align: right;
  direction: rtl;
}

h2 {
  display: block; /* just being explicit */
}

span {
  display: inline-block;
}

<h2>
  هذا عنوان طويل
  <span>one</span>
  <span>two</span>
</h2>

No sé si hay otras peculiaridades en esto, solo encontré esto empíricamente en Chrome.