¿Cuál es exactamente la diferencia entre los valores en inline
y inline-block
de la display
de CSS?
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:
margin-left
, margin-right
, padding-left
, padding-right
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; }