display: inline vs display: block

¿Cuál es la diferencia básica entre los siguientes CSS:

display:inline

y esto:

display:block

Usando estos por separado en un elemento, obtengo el mismo resultado.

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

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

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

Aquí hay una tabla de comparación:

Puedes ver ejemplos aquí.

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.

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

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.

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

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.

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.

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;
      }

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.

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