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

607

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

Logesh Paul
fuente

Respuestas:

1351

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: en línea

pantalla: bloque en línea

pantalla: bloque en línea

bloqueo de pantalla

ingrese la descripción de la imagen aquí

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
splattne
fuente
66
Gran intuición Entonces, ¿la única diferencia es que el atributo de altura de los elementos en línea no se puede establecer?
user2316667
77
@ user2316667 y ancho
Oscar Calderón el
2
@ user2316667 y @OscarCalderon: también, a los elementos en línea no les importan los márgenes verticales y los rellenos y el siguiente elemento se colocará en la misma línea (sin salto de línea después de él). los elementos de bloque como as p, divobtienen 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)
S.Serpooshan
1
padding-top y padding-right también afecta el efecto de visualización del elemento en línea, causando un poco de desorden.
tomwang1013
2
@ manuman94 No, eso no significa eso. Hay casos de uso para todos los diferentes tipos de pantallas.
splattne
126

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

Wouter J
fuente
11
¡Gran respuesta! tl; dr : si desea cambiar el tamaño de los elementos en línea , podría estar usando inline-block como tipo de visualización.
error propenso el
77
Pequeña corrección: los elementos en línea pueden tener un margen horizontal (derecha, izquierda), pero no un margen vertical (arriba, abajo)
whyleee
1
Buena respuesta porque mencionó lo que podemos / no podemos hacer al elegir uno de los displayvalores.
ha9u63ar
14

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

ingrese la descripción de la imagen aquí

Ali
fuente
6

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.

alexandros84
fuente
2
En realidad, img-tag tiene display-inline como su valor de visualización predeterminado. Por eso es posible establecer el ancho y la altura.
Alex
img es un elemento en línea -> developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements ... Entonces, ¿básicamente está diciendo más o menos exactamente lo mismo que digo y está votando?
alexandros84
77
No no soy. Las etiquetas img son "elementos reemplazados", lo que básicamente significa que el contenido se reemplaza para que se comporte como un elemento de bloque en línea. Y sí, la propiedad predeterminada real (la propiedad calculada por el navegador está en línea). Pero la única razón de esto es porque el bloqueo en línea no se introdujo hasta CSS2 y para eso hay un "elemento en línea que se comporta como un elemento en bloque en línea" porque se reemplaza por su contenido. es decir, no está configurando alto / ancho para el elemento, lo está configurando en su contenido - Extraño, sí. Lo sé. drafts.csswg.org/css2/conform.html#replaced-element
Alex
Eso es realmente interesante lo que estás diciendo. ¡Dame algo de tiempo para investigar y reeditar y tal vez recuperar el voto negativo y el voto positivo en su lugar ...! Al final del día, honestamente siento que esta discusión está contribuyendo a la integridad de todo el debate.
alexandros84
1

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.

OverCoder
fuente