display: inline vs display: block

Respuestas:

123

display: block significa que el elemento se muestra como un bloque, como siempre lo han sido los párrafos y los encabezados. Un bloque tiene algo de espacio en blanco encima y debajo y no tolera ningún elemento HTML al lado, excepto cuando se ordena de otra manera (al agregar una declaración flotante a otro elemento, por ejemplo).

display: inline significa que el elemento se muestra en línea, dentro del bloque actual en la misma línea. Solo cuando está entre dos bloques, el elemento forma un 'bloque anónimo', que sin embargo tiene el ancho más pequeño posible.

Lea más sobre las opciones de visualización: http://www.quirksmode.org/css/display.html

Pranay Rana
fuente
1
¿Hay algún elemento que esté en línea de manera predeterminada? ¿Lapso?
eshellborn
1
<span> <a> y <img>
EKanadily
80

Bloquear

Ocupa todo el ancho disponible, con una nueva línea antes y después (display: block;)

En línea

Ocupa solo el ancho que necesita y no fuerza nuevas líneas (display: inline;)

Violar
fuente
40

display: block - un salto de línea antes y después del elemento

display: inline - sin salto de línea antes o después del elemento

xj9
fuente
13

display: block;crea un elemento de nivel de bloque , mientras que display: inline;crea un elemento de nivel en línea . Es un poco difícil explicar la diferencia si no está familiarizado con el modelo de caja css, pero es suficiente decir que los elementos de nivel de bloque interrumpen el flujo de un documento, mientras que los elementos en línea no.

Algunos ejemplos de elementos de bloque incluyen: div, h1, p, y hrlas etiquetas HTML.

Algunos ejemplos de elementos a nivel de línea incluyen: a, span, strong, em, b, y ilas etiquetas HTML.

Personalmente, me gusta pensar en los elementos en línea como elementos tipográficos . Esto no es total o técnicamente correcto, pero en su mayor parte los elementos en línea se comportan de manera muy similar al texto.

Puede leer más a través del artículo sobre el tema aquí . Ya que varias personas en este hilo lo han citado, puede valer la pena leerlo.

Damien Wilson
fuente
8

Pantalla: el bloque tomará toda la línea, es decir, sin salto de línea

Pantalla: en línea solo ocupará el espacio exacto que requiere.

 #block
  {
   display : block;
   background-color:red;
   border:1px solid;
  }

 #inline
 {
  display : inline;
  background-color:red;
  border:1px solid;
 }

Puede consultar un ejemplo en este violín http://jsfiddle.net/RJXZM/1/ .

Aarthi
fuente
1
excelente ... esto es lo que estoy buscando
Vicky
7

los elementos de bloque se expanden para llenar a sus padres.

los elementos en línea se contraen para ser lo suficientemente grandes como para sostener a sus hijos.

James Curran
fuente
5

bloqueo de pantalla

toma la fila completa (100%) de la pantalla, siempre es el 100% del tamaño de la pantalla

ejemplo de bloque de pantalla

pantalla: el bloque en línea ocupa tanto ancho como sea necesario, puede ser del 1% al 100% del tamaño de la pantalla

mostrar ejemplo de bloque en línea

es por eso que tenemos div y span

El estilo predeterminado de Div es el bloque de visualización: ocupa todo el ancho de la pantalla

el estilo predeterminado de span es display: bloque en línea: el span no comienza en una nueva línea y solo ocupa el ancho que sea necesario

Harshit
fuente
es por eso que tenemos div y span - este es impresionante hermano :-)
Siva
1

Agregue un color de fondo al elemento y verá muy bien la diferencia de en línea frente a bloque, como se explica en los otros carteles.

Janick Bernet
fuente
1

Pantalla: bloque Se comporta de la misma manera que las etiquetas 'p' y ocupa toda la fila y no puede haber ningún elemento al lado hasta que esté flotante. Pantalla: en línea Solo usa tanto espacio como sea necesario y permite que otros elementos se alineen junto a sí mismo.

Utilice estas propiedades en caso de formularios y obtendrá una mejor comprensión.

kunal
fuente
0

un bloque o bloque en línea puede tener un ancho (por ejemplo, ancho: 400 px) mientras que el elemento en línea no se ve afectado por el ancho. el elemento en línea puede extenderse a la siguiente línea de texto (ejemplo http://codepen.io/huijing/pen/PNMxXL redimensione la ventana de su navegador para ver eso) mientras que el elemento de bloque no puede.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }
EKanadily
fuente
Esto se lee como se supone que es una respuesta a una de las otras ocho respuestas sobre esta pregunta. Sin embargo, no puedo decir cuál.
Quentin
la mayoría de ellos. solo agregando a la información.
EKanadily
0

Elementos de bloque : Los elementos como div, p, encabezados son nivel de bloque Comienzan desde una nueva línea y ocupan todo el ancho del elemento padre. Elementos en línea : los elementos que les gustan b, i, span, img son de nivel en línea. Nunca comienzan desde una nueva línea y ocupan ancho de contenido.

Avinash Malhotra
fuente
0

Por defecto, los elementos en línea no obligan a una nueva línea a comenzar en el flujo de documentos. Los elementos de bloque, por otro lado, generalmente causan un salto de línea. Puede consultar este enlace

Rohan Devaki
fuente
Gracias por su respuesta. Verifique las otras respuestas primero la próxima vez, ya que esto no agrega nada nuevo.
BluE
Señor, respondí esta pregunta basándome en el conocimiento que sé, ¿por qué iba a ver otras respuestas y publicar mi respuesta? ¿Publicaste este comentario a todos los que respondieron esto? Esto es tan vergonzoso.
Rohan Devaki