css - float - ¿Cuál es la diferencia entre display: inline y display: inline-block?

inline inline block

Question

¿Cuál es exactamente la diferencia entre los valores de inline-block inline y en inline-block de la display de CSS?

Answer 1

Una respuesta visual

Imagina un elemento <span> dentro de un <div> . Si le da al elemento <span> una altura de 100px y un borde rojo, por ejemplo, se verá así con

pantalla: en línea

pantalla: inline-block

bloqueo de pantalla

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

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

Diferencia de estilos soportados como resumen:

• en línea : sólo margin-left , margin-right , padding-left , padding-right
• bloque en línea : margin , padding , height , width

Answer 2

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

Sin embargo hay una generalización que parece equivocada.

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

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

¿Ejemplo?

<img src="#" />

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

Answer 3

Una cosa que no se menciona en las respuestas es que el elemento en línea puede dividirse entre líneas, mientras que el bloque en línea no puede (y obviamente bloquear). 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, se puede usar la altura de línea en su lugar.

<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>

Answer 4

display: inline; Es un modo de visualización para usar en una oración. Por ejemplo, si tienes un párrafo y quieres resaltar una sola palabra, hazlo:

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

El elemento <em> tiene una display: inline; por defecto, porque esta etiqueta siempre se usa en una oración. El elemento <p> tiene una display: block; por defecto, porque no es ni una oración ni en 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 una width , height y margin .
Si desea agregar una height al elemento <em> , necesita configurar este elemento para display: inline-block; . Ahora puede agregar una height al elemento y cualquier otro estilo de bloque (la parte del block del block en inline-block ), pero se coloca en una oración (la parte en inline-block ).