¿Cuál es exactamente la diferencia entre los valores inline
y inline-block
de CSS display
?
¿Cuál es exactamente la diferencia entre los valores inline
y inline-block
de CSS display
?
Respuestas:
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-block
son como display:inline
elementos, 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:
margin-left
, margin-right
, padding-left
,padding-right
margin
, padding
, height
,width
p
, div
obtienen una línea de ancho completo (forzar un salto de línea) pero respetan el ancho / alto y todos los rellenos / márgenes horizontales / verticales. Los elementos de bloque en línea tienen el mismo comportamiento que el bloque pero sin salto de línea completo (se pueden colocar otros elementos junto a ellos)
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 height
o una width
o una vertical margin
. Un elemento con display: block;
puede tener un width
, height
y margin
.
Si desea agregar height
a al <em>
elemento, debe establecer este elemento en display: inline-block;
. Ahora puede agregar height
a al elemento y a cualquier otro estilo de bloque (la block
parte de inline-block
), pero se coloca en una oración (la inline
parte de inline-block
).
display
valores.
¡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:
El img
tiene display: inline
, pero su width
y height
se establecieron con éxito.
La respuesta de splattne probablemente cubrió la mayor parte de todo, así que no repetiré lo mismo, pero: inline
y inline-block
comportarme de manera diferente con la direction
propiedad 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 display
a inline-block
, el navegador parece respetar la direction
propiedad y renderiza los elementos de derecha a izquierda en orden, por lo que two one
se 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.