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


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


515
2018-01-23 09:22


origen


Respuestas:


Una respuesta visual

Imagina un <span> elemento dentro de una <div>. Si le das el <span> elemento de una altura de 100 píxeles y un borde rojo, por ejemplo, se verá así con

pantalla: en línea

display: inline

pantalla: bloque en línea

display: inline-block

bloqueo de pantalla

enter image description here

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

Elementos con display:inline-block son como display:inline elementos, pero pueden tener una anchura y un altura. 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: solamente margin-left, margin-right, padding-left, padding-right
  • bloque en línea: margin, padding, height, width

1202
2017-12-25 20:32



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:

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

los <em> elemento tiene una display: inline; de forma predeterminada, porque esta etiqueta siempre se usa en una oración. los <p> 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 poder tener un height o una width o una vertical margin. Un elemento con display: block;  poder tener un width, height y margin.
Si quieres agregar un height al <em> elemento, debe configurar este elemento para display: inline-block;. Ahora puedes agregar un height al elemento y a cualquier otro estilo de bloque (el block parte de inline-block), pero se coloca en una oración (el inline parte de inline-block)


122
2018-01-23 09:29



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 altura de la línea en 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>

enter image description here


6
2017-07-12 15:16



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

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

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

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

2
2017-07-14 14:33